【ざっくり】WordPressのfunctions.php。主要機能コードを解説【ヘッダー・ページネーション・カスタムフィールド・ウィジェット】

こんにちは!イドです。

WordPressのテーマのファイルで、細かな記述が必要となる「functions.php」。

ざっくり解説します。

WordPressのfunctions.phpの主要な機能は、4つ
カスタムヘッダー:トップページの画像やメニュー
ページネーション:記事のページ送り
カスタムフィールド:HTMLなどの記述なしで書き込めるテンプレート
カスタムウィジェット:移動ができるテンプレート

サイト運営を自動化できるコンテンツマネジメントシステムWordPress。

その中のテーマのコアとなる、functions.phpの自動化ぐあいが、シンプルで素敵だったので紹介します。

functions.phpとは、WPのテーマの動きをつけるコア。いわば、「テーマのブレーン」です。頭脳ですね。

当記事ではfunctions.phpの構成とコードについて、以下4点書いています。

  • カスタムヘッダー:トップページの画像やメニュー
  • ページネーション:記事一覧や記事詳細のページ送り
  • カスタムフィールド:HTMLなどの記述なしで書き込めるテンプレート
  • カスタムウィジェット:カスタムフィールドと似たようなテンプレートだけど、移動ができるもの

functions.phpをざっくり知っておくことで、いろいろな理解がラクに進みました。

カスタムヘッダー:トップページの画像やメニュー

機能はトップページの画像やメニューの設定。

  • カスタムヘッダーの画像の位置や設定を行い、機能を有効にするだけ
  • カスタムメニューは、メニュー表示部分のコードと合わせて管理画面の表示を登録

細かな部分は以下のコードのコメントに記入しています。

ページネーション:記事一覧や記事詳細のページ送り

機能はページ送り。

  • 現在のページ・総ページが分かりやすく、前ページ・次ページへの遷移をしやすく
  • 最初のページでは、前ページへの遷移先を非表示にし、最終ページでは次ページへの遷移先を非表示に

ポイントとなるコードは、下記コードの「// Prev」と「// Next」でコメントアウトした部分。

1ページ目では「Prev」が表示されず、最終ページで「Next」が表示されません。

細かな部分は以下のコードのコメントに記入しています。

カスタムフィールド:HTMLなどの記述なしで書き込めるテンプレート

機能は、決まった書式に入力情報を反映してくれるもの。

コードの構造は4点。

  • 関数の定義
  • 管理画面での表示の設定
  • カスタムフィールドを表示させるための関数
  • データ更新と保存・削除の関数

今回は、「トップの画像」と、「詳細情報」のカスタムフィールドを作っています。

細かな部分は以下のコードのコメントに記入しています。

カスタムウィジェット:カスタムフィールドと似たようなテンプレートだけど、移動ができるもの

機能は決まった書式に入力した内容を反映。決まった範囲で動かせるものです。

コードの構造は、大まかに3点。

  • 関数の登録
  • ウィジェットエリアを作成
  • ウィジェット本体を作成(この中にクラスを作成し初期化・入力項目を作成・入力された情報を保存する処理・情報を画面に表示する処理の4点があります)

細かな部分は以下のコードのコメントに記入しています。

最後に:functions.phpは、雑誌の構造のようなもの

あらためてWordPressは管理者が使いやすく、サイト訪問者に伝わりやすく作られているなあと感じました。

このfunctions.phpの構造。何かに似ているなと思ったら、雑誌じゃないでしょうか?

雑誌の表紙はトップで、ページや目次があって、雑誌のデザインコンセプトに合うように各ページや項目が作られている。

自然な統一感を出せますよね。

この基本を意識しつつ、管理者やサイト訪問者にとってのユーザー体験をワクワクするようなものにできるようプログラミングしていきたいものです ^ ^

以上となります。最後まで読んでいただきありがとうございます。