WordPressテーマをダウンロードすれば、綺麗なデザインですぐに自分のWebサイトをつくれますよね。しかも、SEO対策や各種ＳＮＳへの対応など、なんか良く分からんけど色々気を使ってくれているだろうから、自分は中身を書くだけでしょ～という認識です。
目的はWebサイトを作ることではなく、ブログ記事を皆に見てもらうことだから、有名テーマを利用してさっさと中身のコンテンツを作り始めようぜ、と自分でも
めちゃめちゃ思います。
ですが！オリジナルテーマを作りたい、自分だけのテーマという響きに惹かれるんや！
自分で作れるようになれば、その・・・なんかに繋がるんじゃない！？勉強にもなるし！
ということで、非効率上等で自作テーマにチャレンジしました。
まずは、どういうデザインのWebサイトにするかを決めるために、HTMLで書きながら考える。
いきなりテーマを考えれないので、こうしたいというデザインの検討から始めました。
検討の仕方は色々あると思います。ちゃんとお仕事としてやるなら、関係者にも共有できるように要件の定義や、どういうページを用意する？文字の大きさは？色は？等々いわゆる設計していくところから始めたり。
私もそこから始めましたが、ちゃんとやるのはすぐ飽きましたｗ
イメージが机上では浮かばないし、実際に作っている最中に何度も変えよう、ってなったのでHTMLを作りながら考えました。
しかし、私はHTMLやCSS、JavaScriptを使ったフロントエンドの仕事はしていないし、SEとしてふわっと知識はあるかな？レベルです。
そんな私が初自作で高度なものを目指すのは時間がかかりすぎると思うので、できるだけシンプルな物を目指します。
しかし、さぁコード書くぞ、と意気込んだけどまったく進まない・・・。デザインどころか構造の作り方も分からない・・・。
じゃあどうするか、ということでフレームワークに頼ることに。
フレームワークに頼れば、良く分からんけど大枠は勝手に作ってくれるんじゃない？ぐらいのイメージで調べ始めました。
ググってみて、トップクラスに有名な＝情報量が多そうなフレームワークであるBootstrapを選択しました。以下のサイトからダウンロードできます。
Bootstrapのサイトに実装例もあるので、それが非常に参考になります。
HTMLを作っていくにあたって、自分の考え方としては構造を３つに分けました。
- 「ロゴや各種リンクを置くナビがあるヘッダー部分」
- 「コンテンツを表示するメイン部分」
- 「・・・今は特に書くことないけど、なんか用意しとけフッター」
また、ページの種類も最低限として3種類。
- 「最初に表示されるトップページかつ一部の記事一覧になるページ」
- 「記事の中身を表示するページ」
- 「タグとかカテゴリ等ごとに記事一覧するページ」
つまり、HTMLは３ファイル（ページの種類）作り、中身は３段階（ヘッダー、メイン、フッター）に分けて考えていきます。
トップページのヘッダー部分を考えてみる。
私のイメージとしては「サイトのロゴ」「各所へのリンク」この二つがとりあえずあれば良いかな？という感じです。
ということで、仮ロゴ画像を作ってimgタグで表示し、aタグで囲んだ仮リンクを３つぐらい用意しただけ。
<div class="container overflow-hidden">
<header class="row justify-content-center m-3 border-bottom">
<a href="" class="col-md-6 mb-2 mb-md-0 me-md-auto surukoto-header-logo">
<img src="./img/SurukotoLAB_Header.svg" type=”image/svg+xml” alt="SVG画像"class="img-fluid"/>
</a>
<ul class="nav col-md-6 justify-content-center justify-content-md-end">
<a href="#" class="nav-link surukoto-nav-link">blog</a>
<a href="#surukoto-rank" class="nav-link surukoto-nav-link">Most Popular</a>
<a href="#" class="nav-link surukoto-nav-link">taishi</a>
</ul>
</header>
</div>.surukoto-header-logo{
max-width:200px;
align-self: center;
}
@media (max-width: 767px) {
.surukoto-header-logo{
max-width:150px;
}
}
.surukoto-nav-link{
color: #000;
font-size: 1.0rem;
background-color: #fff;
}
.surukoto-nav-link:hover{
color: #fff;
background-color: #3d3d3d;
}位置調整としてマージンやパディングを指定（Bootstrapで用意されているクラス名を指定）、ロゴ画像は大きくなりすぎないようにMaxサイズを指定しました。
特にマージンやパディングは結構適当で、私の感性で設定してます。計算などはしておらず、実装しては表示して、何か違うなーと思ったら調整して、の繰り返しです。
また、PCで見るときとスマホで見るときの考慮をしたかったのでレスポンシブ対応も行います。
Bootstrapを使っているので、用意してくれているcontainer、row、colクラスを使えば簡単にできます。
ロゴとリンク群の２つのグループに分けますが、スマホなら１列に並ぶイメージで、それ以外（md以上）なら平行に並ぶようにしました。
トップページのメインコンテンツ部分を考えてみる。
記事の一覧はカードスタイルで作成する。
カードは「サムネイル」「タイトル」「更新日」「タグ」の要素があれば良いかな。
Bootstrapにカードのクラスがあるので、それを利用します。サムネイルはcard-img-topクラスを使って、タイトルはcard-title、更新日とタグはcard-textにまとめます。
更新日とタグの間にme-2でマージンを作って、境目が分かるようにします。これで良い感じの記事カードができます。あとは、記事の数だけカード部分の記載が繰り返されますが、HTMLとしてはサンプルで何個かコピペするだけです。
カードを並べて記事の一覧を作っていますが、ヘッダーと同様に、ここでもレスポンシブ対応を考えています。
スマホは１列、タブレットぐらいだと２列、PCなら３列の３パターンつくります。上記のコードだと、row-cols-1でスマホは１列になるように、row-cols-md-2でタブレットなら２列、row-cols-lg-3でPCなら３列になるようにしています。
<div class="container overflow-hidden" id="surukoto-content">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 px-4">
//↓繰り返し部分
<div class="col">
<div class="card">
<img src="./img/computer.jpg" class="card-img-top" alt="" />
<div class="card-body">
<p class="card-title surukoto-card-title">【WordPress】ワードプレス関連の困った事メモ</p>
<div class="card-text surukoto-card-text">
<span class="me-2">2021.11.29</span><a href="#" class="me-1"><span class="badge bg-secondary">タグ</span></a><a href="#" class="me-1"><span class="badge bg-secondary">tag</span></a>
</div>
</div>
</div>
</div>
//↑記事の数だけ作る
</div>
</div>.surukoto-card-title{
color: #111111;
font-weight: bold;
font-size: 1rem;
}
.surukoto-card-text{
color: #545454;
font-size: 0.75rem;
}
@media (max-width: 767px) {
.surukoto-card-title{
font-size: 0.75rem;
}
.surukoto-card-text{
font-size: 0.5rem;
}
}また、すべての記事が表示されると凄いスクロール量になるので、数記事だけ表示させて、全記事は別ページで表示することを想定しました。なので、全記事表示ページへの遷移リンクボタンも付けておきます。
記事一覧の下に付けておくとして、rowタグを追加し、その中でボタンを作りました。ボタンはBootstrapのbtnクラスを指定するだけで簡単にできます。
<div class="row m-5">
<div class="col text-center">
<a href="#" class="btn btn-outline-dark">過去の記事を見る</a>
</div>
</div>ランキングを作りたい。人気のある記事をピックアップする。
週間ランキング枠も想定します。
HTMLなので、ランキング機能は特に実装しておらず、見た目だけです。記事カードを作った要領で作成しました。タグはいらないかなーと思って抜いています。
ただし、レスポンシブの動きは変えていて、スマホの１列の場合はカードを崩して、サムネとその他を平行に並ぶようにしています。
カードだと大きすぎるかな、と思ったので小さくなるようにしてます。
<div class="container overflow-hidden" id="surukoto-rank">
<div class="row mx-4 pb-3 my-3 border-bottom surukoto-rank-head">
Weekly Most Popular
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2 g-md-4 px-4">
//↓繰り返し部分
<div class="col-12 col-md-6 col-lg-4">
<div class="row">
<div class="col-4 col-md-12 align-self-center">
<img src="./img/computer.jpg" class="card-img-top" alt="" />
</div>
<div class="col-8 col-md-12">
<span class="surukoto-rank-text">2021.11.29</span>
<p class="surukoto-rank-title">【PC作業】ちょっと困った時の対応をメモ書き 【よくあること】</p>
</div>
</div>
</div>
//↑繰り返し部分 ランキングに表示する記事の数だけ作る
</div>
</div>トップページのフッター部分を考えてみる。
・・・特に言うこと無し。何となくコピーライトを書いておいただけです。
<footer class="footer py-3 mt-5 bg-dark text-light">
<div class="container text-center">
<p class="footer-copyrigtht"><small>Copyright ©2022 Surukoto LAB, AllRights Reserved.</small></p>
</div>
</footer>ここまで作ったトップページのHTMLイメージです。
左が小さい画面での表示。右がPCなど大きい画面での表示。
記事の中身を表示するための投稿記事ページを考えてみる。
ここでは、記事の文面をメインに、サムネイル、更新日、タグ、の要素があれば良いかなと思いました。
これらの要素はすでにトップページで作成済みなので、大体コピペで持ってきて、体裁を整える程度です。
ここで考えたことは３つです。１つはレスポンシブ対応、２つ目は目次、３つ目は装飾です。
まず、レスポンシブ対応については、そんなに難しいことは考えていなくて、見た目はスマホだろうがPCの大きい画面だろうが、基本変えません。なので、rowとかcolsは使ってません。文字の大きさを変えるぐらいです。大きい画面の場合は文字が大きくなるようにです。これも特に計算なく感覚。
目次については、ulタグを使って作成しています。Bootstrapを導入していることで、勝手にテーブルタイプのデザインを作ってくれますが、好みではなかったので修正しています。線を全部消して、最初のliタグだけ下線を引いています。
装飾については、特に現状はアイデアがあまりなかったので、作りを学ぶという意味で、マーカーだけ作ってみました。
文字を塗りつぶすほどのマーカーではなく、半分程度塗りつぶすようなマーカーにしてみました。
<div class="container overflow-hidden">
<main class="surukoto-article py-3">
<p class="surukoto-article-title">【WordPress】ワードプレス関連の困った事メモ</p>
<div class="surukoto-article-meta my-3">
<span class="me-2">2021.11.29</span>
<a href="#" class=""><span class="badge bg-secondary">タグ</span></a>
<a href="#" class=""><span class="badge bg-secondary">tag</span></a>
</div>
<img src="./computer.jpg" class="mb-3 surukoto-article-Thumbnail" alt="" />
<div class="surukoto-article-introduction mb-5">
<p class="">
ここには紹介文が入ります。以下、コピペで適当な分を入れます
<br>
こんにちは！</p>
</div>
<div class="surukoto-article-agenda p-3 mb-5">
<p class="surukoto-article-agenda-title">目次</p>
<ul class="surukoto-article-agenda-list list-unstyled">
<li class="surukoto-article-agenda-li py-2">
<a href="">項目１</a>
</li>
<li class="surukoto-article-agenda-li py-2">
<a href="">項目2</a>
</li>
<li class="surukoto-article-agenda-li py-2">
<a href="">項目3</a>
<ul class="list-unstyled">
<li class="ps-3 py-1">
<a href="">サブ項目１</a>
</li>
<li class="ps-3 py-1">
<a href="">サブ項目２</a>
</li>
</ul>
</li>
<li class="surukoto-article-agenda-li py-2">
<a href="">項目4</a>
</li>
</ul>
</div>
<div class="surukoto-article-content mb-5">
<h2><span>CSS見出しデザイン</span></h2>
<h2><span>見出し二つ目だけど、どんな感じ？感覚は？ちょっと長い分を書いてみるね</span></h2>
<h3><span>h3の見出しやねん</span></h2>
<p class="">H3の本文を書いていきます。<span class="surukoto-article-under">ここ下線を引いているはず。Spanタグに特定クラス名</span>を設定することで、こんな風に下線が引けます。
</p>
</div>
</main>
</div>/* -----------------------
記事目次
----------------------- */
.surukoto-article-agenda{
background-color: #ececec;
}
.surukoto-article-agenda-title{
font-size: 1.0rem;
font-weight: bold;
}
.surukoto-article-agenda-list{
font-size: 0.75rem;
}
.surukoto-article-agenda-li{
border-bottom: 1px solid ;
color: #BBB;
}
.surukoto-article-agenda-li a{
color: #000;
}
@media (min-width: 767px) {
.surukoto-article-agenda-title{
font-size: 1.5rem;
}
.surukoto-article-agenda-list{
font-size: 1.0rem;
}
}
/* -----------------------
記事本文
----------------------- */
.surukoto-article-content{
font-size: 0.75rem;
counter-reset: h2-counter;
}
/* オリジナル下線*/
.surukoto-article-under {
background: linear-gradient(transparent 70%, #a8eaff 70%);
}
.surukoto-article-content h2 {
position: relative;
padding: 1.5rem;
text-align: center;
font-size: 1.5rem;
margin-top: 5rem;
}
.surukoto-article-content h2::before {
position: absolute;
top: -1rem;
left: calc(50% - 0.75rem);
width: 1.5rem;
height: 2px;
counter-increment: h2-counter;
content: counter(h2-counter, decimal-leading-zero);
background: #000;
font-size: 0.75rem;
line-height: 2rem;
}
.surukoto-article-content h3 {
font-size: 1.0rem;
padding: 0 1rem;
margin: 2rem 0 2rem 0;
border-left: 3px solid #000;
}投稿記事ページのHTMLイメージです
左が小さい画面での表示。右がPCなど大きい画面での表示
タグとかカテゴリなどの記事を一覧するページを考えてみる。
ここは、トップページと基本的には同じです。全対象記事を表示するので、記事一覧部分のカードの量が増えるだけです。
ただし、ページ送り（ページャー、ページネーション）は、複数ページに渡って表示する場合、必要になるので設置しました。
ページネーションとググれば色々な実装方法が出てくるので、あまり難しく考えずにデザインレベルで書けばいいです。
また、カテゴリ名を表示する部分も欲しかったので、ちょろっと追加しています。
<div class="container overflow-hidden">
<div class="row border-bottom mb-4 mx-4">
<div class="col">
<span class="surukoto-category-title me-2">Category : </span>
<span class="surukoto-category-name">カテゴリ名</span>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 px-4">
//↓繰り返し部分
<div class="col">
<div class="card">
<img src="./computer.jpg" class="card-img-top" alt="" />
<div class="card-body">
<p class="card-title surukoto-card-title">【WordPress】ワードプレス関連の困った事メモ</p>
<div class="card-text surukoto-card-text">
<span class="me-2">2021.11.29</span>
<a href="#" class=""><span class="badge bg-secondary">タグ</span></a>
<a href="#" class=""><span class="badge bg-secondary">tag</span></a>
</div>
</div>
</div>
</div>
//↑繰り返し部分 表示したい記事の数だけ作る
<div class="row mt-5 pt-md-5">
<div class="col">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link surukoto-pagination-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><span class="page-link surukoto-pagination-link" href="#">2</span></li>
<li class="page-item"><a class="page-link surukoto-pagination-link" href="#">3</a></li>
<li class="page-item"><a class="page-link surukoto-pagination-link" href="#">4</a></li>
<li class="page-item">
<a class="page-link surukoto-pagination-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>/* -----------------------
ページネーション
----------------------- */
/* pagination */
.pagination {
justify-content: center;
}
/* リンクの枠 */
.pagination .nav-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
}
/* 数字のリンク */
.pagination .nav-links .page-numbers {
text-decoration: none;
color: #333;
border: 1px solid #aaa;
display: inline-block;
border-radius: 6px;
padding: 0.5em 0.8em;
-webkit-transition: .3s;
transition: .3s;
}
/* 現在のページ */
.pagination .nav-links .current {
background-color: #333;
color: #fff;
}
/* 現在のページとドット以外にホバーした時 */
.pagination .nav-links a:hover {
background-color: #333;
color: #fff;
}記事一覧ページのHTMLイメージです
左が小さい画面での表示。右がPCなど大きい画面での表示
ここまでで、ざっくりとイメージしたHTMLができました。
WordPressテーマってそもそもどういう仕組みなのか勉強する。
テーマを作りたいが、テーマがどう動いているのか分からないので、どこに何という名前で作ればいいのか分からない。最低限何を用意すればいいのか、どういう便利機能があるのか、まったく不明・・・。
ということで、まずはWordpressがテーマを読み込んでHTMLを出力する動きを勉強しました。
その勉強をするための前提として、自分のパソコン内にワードプレスを動かせる環境を作成しています。私の場合はXAMPPを使っていて、Cドライブ直下に配備しています。さらに、Wordpress本体のフォルダ名をsurukotoに変更しています。その前提で、皆さんのやり方が異なる場合は合わせて読み合せてください。
XAMPPを使ったWordpressのローカルテスト環境の作り方はこちらの記事で紹介しています（予定）。
Webサイトを表示するためのURLの意味
まず、どうやってWebサイトを表示しているんや・・・？ということで、ググったり動かしたりして調べてみました。
ローカル環境でサイトを表示するURLは私の場合は「http://localhost/surukoto/」になります。surukotoの部分はWordpressのフォルダ名です。フォルダ名変更が無ければ、「http://localhost/wordpress/」になります。
このlocalhostは自分自身を指します。もう少し詳しく言うと、127.0.0.1というループバックアドレスと呼ばれるIPアドレスがあり、これは自分を示すアドレスなのですが、その数値を書かなくてもlocalhostという名前で表せます。http://127.0.0.1/surukoto/と記載するのと同じです。これでもアクセスできます。つまり、自分のパソコンのsurukoto（wordpressフォルダ）ディレクトリにアクセスしているという理解です。
これに加えてポート番号という概念があります。IPアドレスで、どのパソコンと通信するのかというのは判別できるのですが、どのプログラムと通信すればいいのかは分かりません。そこでこのポート番号を利用します。
ブラウザではデフォルトで80番が指定されます。
例えば、http://localhost:49152/surukoto/のようにコロンをつけてポート番号を指定することもできます。この場合は接続できません。なぜなら、49152番で呼び出すプログラムが登録されていないからです。ブラウザに表示するHTML等を提供するプログラムが、そのポート番号で受け付けている必要があります。
つまり、今回表示するときは、何も指定していないので「http://localhost:80/surukoto/」ということだと私は理解しました。
URLへアクセスした時の動き
今回、ローカル環境であるXAMPP側ではApacheが80番ポートにデフォルトで設定されています。そしてApacheはWebサーバ機能を提供しています。ApacheはWEBサイトが表示できるように応答してくれます。
なので整理すると、「http://localhost/surukoto/」でアクセスすると、自分のローカル環境のXAMPPにインストールされているApacheが応答してくれて、Apacheが返答してくれるディレクトリ（http://localhost/）に存在するsurukotoフォルダ(wordpressフォルダ)にアクセスしている、ということですね。
もう少し詳しく見ます。Apacheに通信するとどうなるのでしょうか。
どうやらApacheのconfフォルダに存在するhttpd.confに設定されてあるドキュメントルートを返しているようです。ドキュメントルートはWebサーバにアクセスしたときに見に行くディレクトリ先です。
設定としては、「DocumentRoot “C:/xampp/htdocs”」と記載されています。
なので、「http://localhost/」は「C:/xampp/htdocs」にアクセスするということですね。
そして、アクセスしたときに何のファイルを参照するかの設定もあります。<IfModule dir_module> DirectoryIndexという記載があるのですが、そこにはindex.phpが設定されています。
つまり、「http://localhost/surukoto/」にアクセスすると、「C:/xampp/htdocs/surukoto/index.php」にアクセスしているということっぽいです。
WordPressのテーマにたどり着くまで
では、ワードプレスフォルダ直下のindex.phpから、どうやって各テーマにアクセスして呼び出しているのかを追ってみます。
index.phpには２つしか記載がありません。「define( ‘WP_USE_THEMES’, true );」「require __DIR__ . ‘/wp-blog-header.php’;」です。
前者はどうやらテーマファイルの設定を読み込むか否かの設定のようです。falseにしたらテーマは使わないということです。
後者が具体的に読み込むファイルを指しています。wp-blog-header.phpと指定されています。
同ディレクトリにあるので開いてみると、次はwp-load.phpとtemplate-loader.phpを読み込んでいます。
前者はWordpress自体の設定のようで、データベースに接続するためのユーザー名やパスワードの設定を読み込んだり、ほとんどの関数定義やクラス定義の読み込み等などがwp-load.php以降で行われているようです。これを読み込むことでwordpress関数を使えるようになるってことですね。
後者のtemplate-loader.phpではテンプレート関連の処理が行われます。
記載としては、ABSPATH . WPINC . ‘/template-loader.php’となっています。
変数ABSPATHもWPINCもwp-load.phpで設定されています。define( ‘ABSPATH’, __DIR__ . ‘/’ );とdefine( ‘WPINC’, ‘wp-includes’ );ですね。
つまりC:/xampp/htdocs/surukoto/wp-includes/template-loader.phpということっぽいです。
template-loader.phpではテーマフォルダの中に特定の名前のファイルがあるか調べて、呼び出されているページに応じて、特定のファイルがあれば呼び出すようにしています。どれにも当てはまらなければindex.phpを読み込むようになっているようです。
具体的には、tmplate.phpに記載されているget_index_template関数が実行される流れがあって、何もゲットするテンプレートファイルが無ければ、最終的に$templates = array( “{$type}.php” );の定義にindexが入るという私の理解です。
ちょっと、ここの解釈には自信が無いです。良く分からなかったのでパッと見の理解です。
まとめると、「http://localhost/surukoto/」でアクセスすると、「C:/xampp/htdocs/surukoto/wp-content/themes/surukoto/index.php」にアクセスしているということっぽいです。
これでようやく、テーマを考えていくにあたっての下地をなんとなーくですが学べました。
本格的にPHPを作っていくのは＃２に続きます。
