【WordPress】自作でオリジナルテーマを作成する方法【その②】

この記事では、《HTMLページを元に、WordPressのオリジナルテーマを作成する方法》について、ITエンジニアの僕が学習した内容をまとめています。
  • テンプレートパーツとfunctions.phpの作成

について解説します。
※本記事は、自分で学習したことのまとめ用として書いています。
尚、WordPressの解説で誤った点があれば、スローして頂ければ喜んでキャッチしますのでお願い致します。

事前に読みたい記事

≫【WordPress】自作でオリジナルテーマを作成する方法【その①】

テンプレートパーツとfunctions.phpの作成

テンプレートパーツとfunctions.phpの作成

footer.phpの作成

header.phpは作成済みですので、残りのテンプレートパーツを作成していきます。
demoフォルダにfooter.phpを作成して、HTMLページからフッター部分のコードをコピーして貼り付けます。
具体的には以下のようなソースコードになります。

footer.php

続いて、テンプレートタグに置き換えていきます。
footer.php

これもindex.phpから呼び出さないと意味のないファイルになります。パーツのまとめ役であるindex.phpfooter.phpを呼び出しましょう。
index.php

sidebar.phpの作成

今回サイドバーは、WordPressのウィジェットを使用して表示させるようにします。なので、HTML上は空っぽの状態です。
それでは、demoフォルダ内にsidebar.phpを作成し、ウィジェットエリアを表示する関数を書いていきます。

sidebar.php

たった1行ですが、このコードでウィジェットを表示することができます。
※サイト内で共有するコードはテンプレートパーツにすることでメンテナンス性を保つことができます。
また、サイドバーにウィジェット以外のコードを書く必要が生じた際には、全てのテンプレートを変更せずにsidebar.phpを変更するだけで作業が終わります。
そして、今までと同様にパーツのまとめ役であるindex.phpsidebar.phpを呼び出しましょう。
index.php

※ただし、現時点ではまだサイドバーは表示されません。なぜなら、functions.phpで『ウィジェット機能を有効化する』を実行していないからです。
ですので、お次にウィジェット機能を有効化について見ていきましょう。

functions.phpでウィジェット機能を有効化する

WordPressのテーマは、初期状態ではウィジェット機能が有効化されていません。
なので、ウィジェット機能を使うためのウィジェットエリアを作成するために、関数ファイルのfunctions.phpを作成しましょう。
demoフォルダ内にfunctions.phpを作成し、以下のコードを記述します。

index.php

※PHPファイルは、最後の行がPHPの記述で終わる場合は終了タグを書かないことが推奨されていますので、functions.phpも終了タグ?> は不要です。
ここで記述した関数は、これまでテンプレート内でHTMLを動的生成するために使用したテンプレートタグと違って、少し複雑なので、詳しく解説していきます。

  • register_sidebar(array( の行からが、ウィジェットエリアを定義する関数register_sidebarの本文です。構造としては、register_sidebar(連想配列) という形で、関数を連想配列つきで呼び出していています。そして、次の行からは関数に渡す連想配列が長々と定義されています。今回は、register_sidebar関数に連想配列を渡していますが、 name や id といった、サイドバーウィジェット用の設定を渡しているのです。
  • ‘name’ => ‘デモサイトのサイドバー’,の行では、サイドバーの名前を定義しています。sidebar.phpで呼び出した名前をここで使用します。
  • ‘id’ => ‘primary-widget-area’,の行では、ウィジェットエリアごとに固有のIDを登録します。今回は1つしか作成しないため、どんなIDでも構いません。
  • ‘description’ => ‘サイドバーに表示されるウィジェットエリアです。’,の行は、『ダッシュボード > 外観 > ウィジェット』に表示される説明文を登録しています。
  • ‘before_widget’ => ‘<section id=”%1$s” class=”widget %2$s”>’,の行は、エリア内の各ウィジェットを囲う要素の開始タグを定義しています。%1$sと%2$sの箇所は一意の名前が自動的に与えられます。
  • ‘after_widget’ => ‘</section>’,の行は、各ウィジェットの終了タグです。
  • ‘before_title’ => ‘<h3 class=”widget-title”>’,の行は、各ウィジェットのタイトル要素の開始タグを定義しています。
  • ‘after_title’ => ‘</h3>’,の行は、タイトル要素の終了タグです。

まとめ

まとめ
テンプレートパーツとfunctions.phpの作成については、理解できたかと思います。
また、これ以降の作業については次の記事で解説していきます。

人気記事

≫【2019年最新】IT転職におすすめの転職サイト・転職エージェント3選
≫【無料あり】現役エンジニアおすすめすのプログラミングスクール3社 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です