更新:WordPress オリジナルテーマ作成2

WordPress HTML&CSS
追加記事(学習を進める途中で記事内容を追加しました。22年12月4日)

テンプレートファイルとしては「header.php」「footer.php」「sidebar.php」を書いてきました。これまでは一般的な各テンプレートファイルの考え方で作成してきました(これまでの記事もそうでしたし、よくある動画でも、決まった部分を切り出して各テンプレートファイルにする方法が紹介されています)
今回、別の動画も参考に復習を進めている中で、全く違う切り出し方をされていました。
「header.php」:頭行~</header>まで → <head>~</head>の中身だけ
「footer.php」 :<footer>~最終行まで → <footer>~</footer>まで
あとは必要に応じて別テンプレートファイルとして読み込む。
 ・無理に1つのテンプレートファイルにする必要はない。
 ・後々の変更を考えると別テンプレートファイルとした方が対応しやすい。
全体をよく見てうえで、どういう構成にするのがいいのかをしっかりと考えてテンプレート化してくことが重要なんだと感じました。

前回の続きです。まずはベースとなる部分のWordPress化をやっていきます。
「header.php」「index.php」「footer.php」を完成させます。ここで新たなファイル「functions.php」も登場!ますます混乱です(笑)
でもめげずに頑張って整理していきます。

今回やっていくこと

  • ファイルパスを修正する
  • WordPressの管理画面で設定したテーマ毎の情報を読み込む
  • テーマ独自のファイルを読み込む

整理してみるとこんな感じになりましたが、やってみるとムズカシイ(汗)
なので、一つ一つ整理していきます(教則本をみながらやっていきます)

ファイルパスを修正する

HTMLファイルでは、画像やCSSなどのファイルを読み込むためには「相対パス」で記述する必要がありました。ところが、WordPressでは「相対パス」を扱うことができないので「絶対パス」に書き換える必要があります。
また、実際に読み込む先は各テーマによってディレクトリが変わってしまうので、有効となっているテーマフォルダーへのパスを動的に取得する必要があります。
そこで「get_template_directory_uri()」関数が登場します。テーマフォルダーのパスの記述は…
<?php echo esc_url( get_template_directory_uri() ); ?>
例えば、CSSファイルの書き換えでは・・・
herf=”assets/css/style.css” という記述は
href=”<?php echo esc_url( get_template_directory_uri() ); ?>/assets/css/style.css”
となります。

「相対パス」の部分を修正!(CSSや画像、JavaScriptのファイル読み込み部分です)

WordPressの管理画面で設定したテーマ毎の情報を読み込む

これがいろいろとあります。
まずは管理画面で設定している内容に置き換えるための修正です。

テーマ独自のファイルを読み込む

この後は、「functions.php」も作成した記述にも変更していきます。
が…私自身、まだWordPress化をやっている途中なので、ここまでの学習では書き換えることで具体的にどう必要になるのか・・・が理解できていない部分があります(まぁ、「ここを書き換えるんや」程度での理解にとどめていますので、ご容赦ください)

bodyタグに固有のクラス名をつける(ページ毎にデザインを変更するのに便利)

<body <?php body_class(): ?> > 赤文字部分を追加します。

WordPressがコードを出力する場所を追加する

</head>の直前に「wp_head()」関数を追加します。これは、WordPress本体・テーマ・プラグインで用意されているHTML、CSS、JavaScriptを出力するために必要です。これらを出力するための命令を「functions.php」に記述していくことになります。
同様に</body>の直前には「wp_footer()」関数を追加します。
<?php wp_head(); ?>
<?php wp_footer(); ?>
これで準備が整いました。
教則本では、これ以外にも「wp_body_open()」関数(<body>の直後に追加)などもありましたが、今後の拡張のためのようなので、ここでは割愛しました。

ページのタイトルについても、各ページごとに適切なタイトルにするために「functions.php」に記述していきます。記載が終わったら、「header.php」「footer.php」の該当箇所を削除します。

このあと「functions.php」で必要になってくる関数は・・・
・タイトル出力:add_theme_support(機能名, 引数) ※機能名は必須
・jQueryの読み込み:wp_enqueue_script( ‘jquery’ )
・JavaScript、CSS(googleフォントやstyleシート):
 wp_enqueue_script( ハンドル名, ファイルパス, 依存関係, バージョン, 出力場所 )

最後の方はちょっと簡単なまとめになってしまいましたが、「functions.php」の記述は教則本などを見ていただく方が分かりやすいので、ここでは詳細は割愛しています。

まとめ

これでベースとなる部分のWordPress化までは完了になります。ここから先、固定ページや投稿ページなどのテンプレートファイルの作成などに入っていきます・・・
ここまでの理解も自分の中ではまだまだ(70%くらい)ですが、内容を復習しつつ、この先の学習を進めていきたいと思います。


WordPressオリジナルテーマ制作入門 [ 清水由規 ]

コメント