ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

トップ > Wordpress > #1 Wordpress独自テーマ作成によく使う関数や記述。「カスタマイズ頻出文」

#1 Wordpress独自テーマ作成によく使う関数や記述。「カスタマイズ頻出文」

Wordpress

ワードプレスの頻出関数、オリジナルテーマ作成に良く使うカスタマイズ記述

Wordpressの独自テーマ作成時、カスタマイズによくつかう関数や記述をまとめました。

自分もよく何だっけなと調べながら使用する事も多いので備忘録です。

 

独自テーマ作成の流れに沿って記述しているので、是非テーマの作成の際などお役立て頂ければと思います。

 

 

style.cssへのテーマ定義コメント

Wordpressでテーマを作成する方法として、まず「wp-content/themes/」の中にフォルダを作成し、その中のstyle.cssファイル冒頭へ以下を記述します。

そうすることで自動でそのフォルダをテーマのディレクトリとして認識してくれます。

style.css
/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明文
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
Template: 親テーマのディレクトリ名
*/

文字エンコーディングを示す「@charset "UTF-8";」を１行目とすると、２行目以降に上記を記述します。

最低限テーマの名前さえ入力しておけばテーマとして認識されるので、他は後からでも追記していきましょう。

子テーマ作成時はTemplate: 親テーマのディレクトリ名という通り、テーマの名前などではなくthemesフォルダ内を見て、親にするテーマのフォルダの名前を入力しておきましょう。

 

 

テーマのフォルダへのパスを出力する

WordpressのURLはhtmlなどのファイルへ直接アクセスしているわけではありません。

アクセスしたURL、リクエストから現在使用のテーマでどのようなテンプレートで表示すればよいか判断して表示します。

その際にテンプレートにhtmlで通るような相対パスを記述しても実際アクセスしているURLからみたパスとしては違ってくるので、うまく読み込めません。

そこでテーマのディレクトリのパスを出力する関数を用いて、cssファイルや画像などのテーマ内のファイルへのパスを通します。

各テンプレートファイル.php
/* テーマまたは子テーマの スタイルシート ディレクトリのURIを取得。 */
get_stylesheet_directory_uri()

/* 親テーマのディレクトリを取得。 */
get_template_directory_uri()

 

例えばテーマのstyle.cssや画像を読み込むのであれば以下のような記述になります。

/* CSS読み込み */
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/style.css">
/* 画像表示 */
<img src="<?php echo get_stylesheet_directory_uri();?>/images/sample.jpg">

 

(2021.09.21追記)一応、公式での正しいCSSの読み込み手順としてはwp_enqueue_styleとwp_enqueue_scriptという関数を用います。

関数リファレンス/wp enqueue style - WordPress Codex 日本語版

ここでは割愛しますので、詳細は上記Codexをご参照ください。


テンプレート内の基本アクションフック

wp_head()とwp_footer()という関数をテンプレート内で記述しておかないと、Wordpressにログインしても、サイト上部に表示されるはずの管理バーが表示されません。

各テンプレートファイル.php
/* ~省略~ head閉じタグ手前に記述 */
<?php wp_head(); ?>
</head>
/* ~省略~ body閉じタグ手前に記述 */
<?php wp_footer(); ?>
</body>

この関数が何をしているかというと、アクションフックという

「この部分で色々処理をさせることが出来るよ！」

という場所を設けるということをしています。

物を引っかけるフックと同じです。

 

例えばスライドショーのプラグインを導入したとすると、head内にスライドショー用のCSSファイルを読み込ませて、サイト下部にJavaScriptを読み込ませて処理をするというような事をします。

その処理(アクション)を引っかけるためのフックがアクションフックです。

これが無いとプラグインが動作しなかったりします。

ログイン時の管理バーもこれによって表示されているので、独自テーマ作成の際には忘れず用いましょう。

 

記事の出力に用いる関数

Wordpressで記事を表示したい部分には以下のような関数を用います。

have_posts() //表示する記事の有無を判定
the_post() //ループのカウントを進め、次に表示する記事を以下の関数で出力出来るようセット。

the_title() //タイトルを出力
the_content //本文を出力
the_date() //投稿日を出力
the_permalink() //記事のURLを出力

the_post_thumbnail() //記事のアイキャッチ画像を出力
the_excerpt() //記事の抜粋文を出力

上記の関数を用いて作成するメインループの例が以下のような形です。

各テンプレートファイル.php
<!--メインループ開始-->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <!-- 個別記事へのリンクURL出力 -->
        <a href="<?php the_permalink(); ?>">
            <article>
                <!-- 記事タイトル表示 -->
                <h2><?php the_title();?></h2>
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> 
                <!-- 記事本文表示 -->
                <p><?php the_content(); ?></p>
                <!-- 記事投稿日表示  -->
                <p><?php the_date(); ?></p>
            </article>
        </a>
<?php
    endwhile; //記事の繰り返しの終了
else : echo '記事がありません'; //記事が無かった場合の内容
endif; //記事の有無の分岐終了
?>
<!--//メインループここまで-->

 アーカイブ等の一覧で本文の一部のみ抜粋して表示させる場合にはthe_excerpt()関数を用います。

その際、手動で抜粋を入力していなければ通常は110文字で自動で抽出され、110文字を越える部分は[…]と末尾に追加し省略されます。

なお、注意として「WP Multibyte Patch」というプラグインを導入していなければ日本語のようなマルチバイト文字で文字数カウントがうまく動作せず、抜粋が機能しません。日本語のサイトでは「WP Multibyte Patch」を入れておきましょう。

 

 

ヘッダー、フッター、ウィジェット、検索等の出力

ヘッダーフッターなど共通テンプレートをファイルへ切り分けて出力させる場合や、サイドバーや検索を出力する際は以下の関数を用います。

各テンプレートファイル.php
get_header();  //header.phpを出力
get_footer();  //footer.phpを出力

get_sidebar();  //sidebar.phpを出力。引数指定するとsidebar-$name.phpを出力。
dynamic_sidebar( 'ウィジェット名かID' ); //ウィジェットを出力。

get_search_form(); //searchform.phpを出力。ファイルが無ければ初期検索フォームを表示。
get_template_part( 'template-parts/content' ); //template-parts/content.phpを出力
comments_template(); //comments.phpを出力。ファイルが無ければ初期コメントパーツを表示。

wp_nav_menu( オプション用の配列 ); //カスタムメニューを出力。引数詳細はCodex参照

通常のサイドバーは単なるテンプレートファイルのこと。

ダイナミックサイドバーがウィジェットエリアの事です。

その他のテンプレートパーツは任意に作成できる部分的なファイルです。

▼各テンプレートに関しては、公式のテンプレート階層ページの概観図が非常に参考になります。

テンプレート階層 - WordPress Codex 日本語版

 

functions.phpでテーマのための関数を記述

色々便利な機能を有効化したりするために必要な記述です。よく忘れがち。

functions.php
/* 記事のアイキャッチ画像機能を有効化*/
add_theme_support( 'post-thumbnails' );

/* カスタムメニュー機能を登録・有効化*/
register_nav_menu( 'メニュー位置の識別子', 'メニューの説明文' );

/* カスタムヘッダー機能を有効化*/
add_theme_support( 'custom-header' );

/* カスタム背景機能を有効化*/
add_theme_support( 'custom-background' );

/*フィードリンクの自動出力を有効化*/
add_theme_support( 'automatic-feed-links' ); 

/* ウィジェットの登録*/
register_sidebar(array(
        'name'          => 'ウィジェットの名前',
        'id'            => 'ウィジェットのID',
        'description'   => 'ウィジェットの説明。',
        'class'         => 'ウィジェットのclass',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

/* 投稿フォーマットの有効化*/
add_theme_support( 'post-formats', array(
  //配列でフォーマットを複数指定できます。
  'aside', //アサイド
  'gallery', //ギャラリー 
  'image', //画像 
) );

/*管理画面での投稿エディター用スタイルの適用*/
add_editor_style(); //デフォルトでeditor-style.css を読み込みます。引数に独自のファイルパスを指定する事も可。

 

 

カスタム固定ページテンプレート

固定ページで他のページと異なるようなカスタムされたテンプレートを作成することができます。

任意のテンプレート名.phpファイルをテーマフォルダ内に作成し、冒頭に以下を記述します。

<?php
/*
Template Name: カスタムテンプレートの名前
*/
?>

カスタムテンプレートファイルが存在すると、固定ページの作成・編集時にページテンプレート選択のオプションが表示され、選べるようになります。

 

Wordpressカスタマイズを詳しく学ぶ

▼PHPも同時にちゃんと学べて、本格的なカスタマイズの入り口にオススメです。

 

 ▼Part.2としてテンプレートタグのみ一覧で見やすくピックアップした記事を書きました！是非お役立てください。

webabc.hatenablog.jp

 

 
以上、ご参考頂けたなら幸いです。
 
最後までお読みいただきありがとうございました！
 
 
▼公式オンラインマニュアル