内部関数について

テキスト目次 > 内部関数について

WordPressにはいろいろな関数が用意されており、より細かく内部を作り込んでいくことができます。

ここではいくつかの方法をご紹介します。

目次

管理画面で設定したタイトルをtitleタグとして出力する

現状、header.phpでタイトルタグを「 <title>ウェブストエイト</title>」で設定していますが、このままでは全てのページで同じタイトルが出力されてしまいます。

header.phpのタイトルタグ。全て同じ中身が出力される

そこで下記のような命名規則で、各ページによって動的にタイトルタグを出力するように変更します。
トのタイトル「大阪の個別指導WEBスクールWEBST8」、キャッチフレーズ「
 

1. 管理画面からサイトタイトルやキャッチフレーズを設定する

まずは、管理画面からサイトタイトルやキャッチフレーズを設定してみましょう。

設定＞一般設定を選択します。
設定＞一般設定
 

一般設定が表示されます。ここでは下記のように変更して保存します。
WordPress一般設定＞サイトのタイトルとキャッチフレーズを変更
 

2. 既存のtitleタグの部分を削除またはコメントアウトする

つぎに、header.phpの既存のtitleタグの部分を削除またはコメントアウトします(2重で出力されるのを防ぐため)。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <!-- <title>ウェブストエイト</title>　削除またはコメントアウト -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

3. functions.phpでタイトルの挿入機能を有効にする

最後に、functions.phpでタイトルの挿入機能を有効にします。functions.phpに下記のように追記してみてください。

<?php
function webst8_setup() {
   add_theme_support( 'post-thumbnails' ); //アイキャッチ画像をON
   add_theme_support( 'title-tag' ); //タイトルタグを挿入
}
add_action( 'after_setup_theme', 'webst8_setup' ); //テーマ初期化のタイミングで関数を読み込み

そうすると、設定＞一般設定で設定したサイトタイトル・キャッチフレーズ、および固定ページのタイトルがtitleタグとして出力されるようになります。

トップページのタイトルタグ

トップページのタイトルタグ

固定ページ・投稿（下層ページ）のタイトルタグ

固定ページ・投稿（下層ページ）のタイトルタグ

メニューバーのリンクを繋げる

ページを複数作った場合は、メニューバーのリンクを繋げてあげましょう。

WordPressではhome_url()関数を使用することで、トップページのURLを簡単に取得することができます。下層ページには引数を入れてhome_url(“/ページ名/”)で出力することが来ます。

<header class="bg-secondary-subtle">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>">WEBST8</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="<?php echo esc_url( home_url() ); ?>">HOME</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="<?php echo esc_url( home_url('/about/') ); ?>">ABOUT</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="<?php echo esc_url( home_url('/blog/') ); ?>">BLOG</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="<?php echo esc_url( home_url('/contact/') ); ?>">CONTACT</a>
              </li>
            </ul>
            <form class="d-flex" role="search" method="get" action="<?php echo esc_url( home_url() ); ?>" name="s">
            <input class="form-control me-2" type="search" name="s" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
          </div>
        </div>
      </nav>
    </header>

なお、esc_url()はセキュリティ対策の一つで不正なコードを実行しないようにしています。ここでは割愛しますが、気になる方は調べてみてください。

これで各ページにナビゲーションを繋げることができました。

(応用)管理画面からメニューを設定できるようにする

最後にheader.php内にあるナビゲーションメニューを管理画面から設定できるようにする方法を解説します。

外観＞メニューからナビゲーションの編集ができるようにする

WordPressの管理画面には自由にメニューを編集できる「ナビゲーションメニュー」という機能が用意されています。

こちらの機能を使ってナビゲーションを表示させておくと、ナビゲーションの追加や削除などがダッシュボード上から簡単にできるようになるため便利です。

ナビゲーションメニューは外観＞メニューから設定できますが、アイキャッチ画像の設定と同様に、初期状態ではOFF状態で表示されていません。

外観＞メニューがない

そこでfunctions.php内のwebst8_setup()関数の中に、add_theme_support(‘menus’)を追加し、メニュー機能を有効化します。

<?php 
function webst8_setup()
{
  add_theme_support('post-thumbnails'); //アイキャッチ画像をON 
  add_theme_support( 'title-tag' ); //タイトルタグを挿入

  add_theme_support('menus'); //メニュー機能をON 

  register_nav_menus([ //メニューの表示位置を作成
    'header_nav' => 'ヘッダーナビゲーション'
  ]);
}
add_action('after_setup_theme', 'webst8_setup'); //テーマ初期化のタイミングで関数を読み込み

カスタムメニューが有効になると、管理画面の「外観」の中にメニューという項目が表示されるようになります。
外観＞メニューが表示された

早速、外観＞メニューから「main-manu」という名称でメニューを新規作成しましょう。メニューの位置には「ヘッダーナビゲーション」にチェックを入れておきます。

「main-manu」という名称でメニューを新規作成する

これでWordPressの管理画面から設定できるようになりましたが、まだ設定した内容が表示されない状態です。

そこで、テンプレート(header.php)にメニューバーを表示するように修正していきます。

<ul class=”navbar-nav me-auto mb-2 mb-lg-0″>…</ul>のセクションを削除して、代わりにメニュー用の関数wp_nav_menu()を追記します。

  <header class="bg-secondary-subtle">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>">WEBST8</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <?php wp_nav_menu(); ?>
            <form class="d-flex" role="search" method="get" action="<?php echo esc_url( home_url() ); ?>" name="s">
            <input class="form-control me-2" type="search" name="s" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
          </div>
        </div>
      </nav>
    </header>

これで、外観＞メニューで設定したメニューが表示されます。

wp_nav_menu()で外観？メニューで作成したナビゲーションを表示させている例

しかし、この方法では元々ul・lli・aタグに付与されていたクラス名がなくなってしまっているので、ナビゲーションのデザインが崩れてしまっています。

元々ul・lli・aタグに付与されていたクラス名がなくなったためデザインが崩れてしまっている

ここで、同じスタイルをそれぞれのタグに指定してあげることでデザインを元に戻すこともできますが、wp_get_nav_menu_items()関数を使用する方法でもul・lli・aタグに対してクラス名を付与することができます。

  <header class="bg-secondary-subtle">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="<?php echo esc_url( home_url() ); ?>">WEBST8</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <?php
          $menu_name = 'header_nav'; // register_nav_menusで追加したメニュー位置を指定
          if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
            $menu = wp_get_nav_menu_object($locations[$menu_name]);
 
            $menu_items = wp_get_nav_menu_items($menu->term_id);
 
            $menu_list = '<ul class="navbar-nav me-auto mb-2 mb-lg-0">';
 
            foreach ((array) $menu_items as $key => $menu_item) {
              $title = $menu_item->title;
              $url = $menu_item->url;
              $menu_list .= '<li class="nav-item"><a class="nav-link active" href="' . $url . '">' . $title . '</a></li>';
            }
            $menu_list .= '</ul>';
          } else {
            $menu_list = '<p>メニュー位置が設定されていません。</p>';
          }
          echo $menu_list;
          ?>
            <form class="d-flex" role="search" method="get" action="<?php esc_url( home_url() ); ?>" name="s">
            <input class="form-control me-2" type="search" name="s" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
          </div>
        </div>
      </nav>
    </header>

参考：wp_get_nav_menu_items() – Function | Developer.WordPress.org Building simple menu listより

これで、クラス名を残したまま外観＞メニューでメニューを追加したり削除したりすることができるようになりました。

まとめ

まとめです。今回はWordPressでオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にテーマの作成方法の基本について説明しました。

WordPressでテーマを作るためには、どの名前のテンプレートがどんな役割を持っているか・どんな優先順位になっているかや、主要な関数や使い方を覚えたうえで、HTMLに組み込んでいく必要があります。

たくさんのテンプレートや関数がありますが、必要最低限はindex.phpとstyle.cssですので、まずは最小構成のテーマから徐々に作り始めていけば良いかと思います。

以下に本記事で紹介したテンプレートと関数を再掲しますのでご参考ください。

■主要なWordPressのテンプレート役割

テンプレートファイル名概要
index.phpWordPress必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレート。
page.php固定ページ用のテンプレート
single.php投稿用のテンプレート
archive.phpアーカイブ用のテンプレート
category.phpカテゴリーページのテンプレート
front-page.phpトップページ用のテンプレート
home.phpトップページ・投稿一覧用のテンプレート　
※front-page.phpが存在せず設定＞表示設定でフロントページに「最新の投稿」が設定されているときにトップページに適用される
※設定＞表示設定で投稿一覧に固定ページが設定されているときに投稿一覧ページとして適用される
search.php検索結果ページ用のテンプレート

■主要なWordPress独自の関数

項目内容
ループWordPressの投稿の中身を表示するために使われるWordPress用の構文(メインループ)です。参考コード①のような形でセットで使われます。
参考：The Loop – Theme Handbook | Developer.WordPress.org
参考：have_posts() – Function | Developer.WordPress.org
参考：the_post() – Function | Developer.WordPress.org
the_title()投稿や固定ページのタイトルを表示します。whileループの中で使用します。参考：the_title() – Function | Developer.WordPress.org
the_content()投稿や固定ページの本文を出力します。 whileループの中で使用します。参考：the_content() – Function | Developer.WordPress.org
get_the_date()日付を出力する関数。whileループ内で使用します。
the_category()カテゴリー情報一覧を出力する関数。whileループ内で使用します。
the_post_thumbnail()アイキャッチ画像を表示する関数。whileループ内で使用します。
get_permalink()記事のパーマリンク(URL)を出力する関数。whileループ内で使用します。
the_search_query()検索されたキーワードを出力する関数。
wp_nav_menu()外観>メニューで設定されたナビゲーションメニューを出力する関数。

参考コード①

<?php 
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
投稿・固定ページのタイトル、本文、カテゴリー、著者、投稿日時、アイキャッチなど情報を表示したりする各種処理を書くことができる
<?php 
endwhile;
endif;
?>

これまで紹介した方法は、初学習用にある程度簡略化しています。実運用上を考えると、もう少し作り込んでいくべき箇所もあります。

より本格的に勉強したい方は本などを購入して勉強してみると良いかと思います。

今回は以上になります。最後までお読みいただきありがとうございました。

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP