PHPの勉強がてらWordPress-その２テーマ制作
こんにちは。
前回、WordPressのローカル環境を整え、基本的なWordPressの設定まで行いました。
前回の記事 micche-labo.hatenablog.com
その後、試行錯誤しながらなんとかWordPressのテーマ（めーーっちゃ簡単版）を制作して、とりあえず形になったので記録として記事にしていこうと思います。
完成予想図
とりあえず完成する予定のサイトスクショ。
トップページ
トップには大きい写真をスライドショーでドーン。
ケーンバーンズ効果を付与。
タイトルはGoogleフォント使用。
固定ページ
投稿ページ
WordPressの骨組みを作る
普通にindex.htmlで書いて、その後ファイルをphpに変え、分割しました。
必要な箇所は適宜wordpressの独自関数に変更。これがなかなか大変でした。
WordPress公式のドキュメントを検索しつつ、google検索でいろんな方のブログを拝見。
なるべく最新の情報が欲しかったので都度公式と照らし合わせながら記入。
作成したphpファイル
骨組みとして
- ヘッダー用の
header-home.php、header-page.php、header-single.phpを３つ。 - フッター用の
footer.phpひとつ。 index.phpというトップページ用ひとつ。single.phpという投稿ページ用ひとつ。page.phpという固定ページ用ひとつ。
投稿ページと固定ページは今回同じものを使用しました。
ファイルは分けましたが中身は同じです。
functions.phpについて
最低限これだけは、という機能用にfunctions.phpを作ってコードを記入しました。
functions.phpについての公式ドキュメント
テーマのセットアップ
まずはじめに、if(!function_exists('study_theme_setup')):で、'study_theme_setup'という関数名が既に使われていないかどうかをチェックしています。
もしもなかったら、関数を実行します。
これは将来的に子テーマを作る際、wordpressが子テーマから親テーマの順で読み込むため、子テーマで指定した内容で上書きできるようにするための設定です。
もしも子テーマで'study_theme_setup'という関数に対し、違う内容で上書きしたくても、親テーマで既に使われていて上書きできない！という事態を避けることができます。
次に、function study_theme_setup()で{}内にセットアップ内容を記入。
endifで一旦if文を終わらせます。
次にadd_action('after_setup_theme', 'study_theme_setup');で、テーマ読み込み後にセットアップ関数が実行されるように記入します。
セットアップの中身に関してはコメントアウトの通りです。
<?php //セットアップのための関数 if (!function_exists('study_theme_setup')) : function study_theme_setup() { load_theme_textdomain('study_theme', get_template_directory() . '/languages'); //翻訳用 add_theme_support('automatic-feed-links'); //フィードリンク用 add_theme_support('post-thumbnails'); //アイキャッチ画像を設定できるようにする register_nav_menus(array( 'header-menu' => __('ヘッダーメニュー', 'study_theme'), 'footer-menu' => __('フッターメニュー', 'study_theme') )); //ナビゲーションメニュー用 add_theme_support('post-formats', array('aside', 'gallery', 'quote', 'image', 'video')); //投稿フォーマット用 } endif; // study_theme_setupここまで add_action('after_setup_theme', 'study_theme_setup'); //呼び出す
register_nav_menus(array( ));の中身は配列です。
header-menuという名前のメニューと、footer-menuという名前のメニューをそれぞれ作り、WordPressでのメニュー表記は、つづく=>__()のカッコ内でそれぞれ指定。
メニューの表示位置に関しては、header-home.php、header-page.php、header-single.php内にそれぞれ記入していきます。
下記は一例。
<?php wp_nav_menu(array( 'theme_location' => 'header-menu', 'container' => false, //コンテナのデフォルトdivを非表示 'menu_class' => 'uk-nav uk-nav-default uk-nav-parent-icon', //ulのクラス名 'menu_id' => 'header-menu' //ulのid名。していなければwordpress上で作成した時のメニュー名が入る )); ?>
メニューに
- ホーム（トップページ）
- 適当な記事ページ（投稿ページ）
- aboutページ（固定ページ）
- プライバシポリシーページ（固定ページ）
を設定した場合の展開される html は、
<ul id="header-menu" class="uk-nav uk-nav-default uk-nav-parent-icon"> <li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-38"> <a href="https://study.local/">ホーム</a> </li> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-40"> <a href="https://study.local/hello-world/">Hello world!</a> </li> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"> <a href="https://study.local/sample-page/">about</a> </li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-39"> <a href="https://study.local/privacy-policy/">Privacy Policy</a> </li> </ul>
のようになる。
※liのクラス名やid名は、WordPressで自動的に挿入されるもの。
スタイルシートの読み込み設定
スタイルシートを読み込ませる設定をfunctions.phpの続きに記入。
//style.css読み込み
wp_enqueue_style('style', get_stylesheet_uri());
背景画像の設定
管理画面から背景画像が設定できるようにfunctions.phpに追記。
//背景画像
$custom_background_defaults = array(
'default-image' => get_template_directory_uri().'/image/bg.jpeg',
'default-preset' => 'default', // 'default', 'fill', 'fit', 'repeat', 'custom'
'default-position-x' => 'center', // 'left', 'center', 'right'
'default-position-y' => 'center', // 'top', 'center', 'bottom'
'default-size' => 'cover', // 'auto', 'contain', 'cover'
'default-repeat' => 'repeat', // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
'default-attachment' => 'fixed', // 'scroll', 'fixed'
'default-color' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => '',
);
add_theme_support('custom-background', $custom_background_defaults); //呼び出す
Check!
デフォルトで画像ファイルを当てたい時は、get_template_directory_uri().'/image/bg.jpeg'のように、get_template_directory_uri()に.で相対パスで画像アドレスを連結する。
その他のファイルやフォルダ
cssはとりあえず、自分用にmystyle.scssというファイルを作り、vscodeでcssファイルにコンパイル。
コンパイル後のmystyle.cssファイルをstyle.cssに@importでインポートしました。
以下はcss例。
POINT/*〜*/はWordPressテーマリポジトリのテーマに必要な項目。
実際に記入する際は、説明のためにつけた/*テーマタイトル*/などは消してください。
/* Theme Name: Study /*テーマタイトル*/ Author: micche /*テーマ制作者名*/ Description: 勉強用テーマ /*テーマの説明*/ Version: 1.0 /*テーマのバージョン*/ Requires at least: 5.8 /*テーマが機能する一番古いWordPressバージョン*/ Tested up to: 5.8 /*テーマをテスト済みのwordpressバージョン*/ Requires PHP : 7.4 /*対応しているphpのバージョン*/ License: GNU General Public License v2 or later /*ライセンス表記*/ License URI:htmlhttp://www.gnu.org/licenses/gpl-2.0.html /*GPLライセンスurl*/ Text Domain: study /*翻訳用のテキスドメインに使用される文字列*/ */ @import url(mystyle.css);
/**/内はwordpressのドキュメント参照。
ライセンスについてはこちら。
ほか、imageという画像用フォルダを作り、そこにたこやきの写真と背景の画像を収納しました。
デザインについて
今回phpの勉強がしたかったので、cssなどのデザインはフレームワークに頼ることにしました。
少しだけscssで書いてますが、ほんと、ほんのちょっとだけ。
CDNで読み込め、アイコンもあり、javascriptも入っているので、手軽にwebページに動きが付けられるのがよいと感じました。
ただ、初めて利用した為、公式ドキュメントを参照しながらのマークアップはかなり時間を食い、結局は自分でcss書いた方が早かったかもしれないです😓
そして、あとあと後悔したんですが、wordpressの独自関数を使用してナビメニューを実装すると、子要素のulやaにclassが指定できないので、UIkitの恩恵が一部受けられないことが判明。
ドロップダウンで子要素のulを表示するにはdivでラップし、クラス指定しなくちゃいけないので、もとからついてるクラスにcss追加する必要があり、今回は子要素なしのナビメニューに。
トップページのみは、ページ内リンクとし、普通にindex.phpに関数使わずhtmlで書きました。
まとめ
今日はいったんここまで。
つづきの記事では
などの骨組みとなるphpファイルのマークアップ中身について触れていきます！
