【WordPress】自作でオリジナルテーマを作成する方法ワードプレスで使う関数・テンプレートタグの記述を一挙解説

このブログでは、自作でオリジナルテーマを作成する方法ワードプレスで使う関数・テンプレートタグの記述について解説していきます。

こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。

【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者 (https://coconala.com/users/2367002)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)

佐藤先生

ぺんぺん

自作でオリジナルテーマってどうやって作るの？できれば難しい記述なく作れる方法を教えてください。

もし読み進めてみても分からないことがあれば1500円でレクチャーしています

佐藤先生

WordPressのオリジナルテーマを作成する前に、コードエディタのインストールが先です。インストールがまだの方はこちらの記事で解説していますので準備しましょう！

WordPressのテーマを自分で作成する、と聞くととても難しそうなイメージを持ちますよね。しかし、使う関数や利用できる便利機能を導入する記述例などを知っていれば、WordPress初心者でも作成することができます。Wordpressの知識はあまりないから不安という方でも、オリジナルのテーマを作成するために使える関数や記述を紹介しますので、お役立ていただければと思います。

自作でオリジナルテーマを作るには、はじめに最小構成にテーマ定義コメントを記述する

WordPressで独自のテーマを作製したいときの方法を紹介します。WordPressのテーマを構成している最小ファイルは「style.css」と「index.php」の二つです。

「wp-content/themes/」の中に作成したい独自テーマのフォルダを作ります。まず、「style.css」の冒頭に以下のコードを記述することにより、自動的に独自テーマについての情報を記録している保存場所、つまりディレクトリとして認識してくれます。

子テーマを作成する時には、親テーマとの関連性が必要なので、最後の行に「Template: 親テーマのディレクトリ名」を追記してあげてください。

動画のほうが分かりやすいという方はこちらでも解説しております。
↓↓

@charset"UTF-8";とは

＠charaset"UTF-8";とは、文字エンコーディングを行うために記述します。2行目以降にテーマの基本的な情報である上記を記述していきます。
テーマの名前は必須ですが、それ以外の情報はなくても独自テーマを作成するためのフォルダとして認識されるため、あとから追記する方法でも構いません。
親テーマだけではなく、子テーマを作成するのであれば親テーマとして使いたいフォルダに名前を付けて入力しておくことをおすすめします。

ディレクトリから正しくパスを出力するには？

続いて、テーマのディレクトリからパスを出力するための関数を用いて、各ファイルへパスを通せるようにコーディングしていきましょう。

ワードpressのURLはアクセスしたURLやリクエストに応じてテンプレートの表示を判断しているため、htmlの通るパスとアクセスしたURLで見るパスが異なり、正しく読み込みできない状況が生じます。ですからテーマの定義が記録されているディレクトリのパスを出力するための関数が必要なのです。

<?php echo get_stylesheet_directory_uri(); ?>とは

 get_template_stylesheet_uri()とはワードプレスの関数です。関数を使うことでテーマディレクトリを取得することができます。
例えば、
・CSSのファイルを読み込ませたい時
・画像を表示させたい時
に使います。

ワードプレスのテンプレートファイルにCSSを読み込ませたい時の方法

基本的には、CSSファイルの読み込みは、headタグの中に記述してファイルを読み込みます。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

get_stylesheet_directory_uri()は、テンプレートタグといいます。

テンプレートタグとはPHPという言語で作られている関数のことです。

ワードプレスがPHPで開発されているので
テンプレートタグもPHPの関数ですね。

ワードプレスのテンプレートファイルに画像を出力したい時の方法

まずは記述の前に、挿入したい画像は、
index.phpやstyle.cssと同じ階層に
imagesフォルダを作成して、そこに画像をおいておきます。

<div class="header_logo">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/pay.png" alt="">
</div>

出力方法はCSSファイルの読み込みと同じ関数を使いますので簡単です。

しかし、HTMLでの記述と違うのは、絶対パスで書くということです。
関数の後は、必ず「/（スラッシュ）」から書き始めましょう。

管理バーやプラグインを正常に動作させる関数「アクションフックとは」

独自テーマを使ってWordPressで記事を作製しようと思ってログインしても、管理バーが表示されない場合はどうすればいいのでしょうか。
テンプレート内への関数記述が必要です。

各テンプレートファイルに次の関数を記述しておきましょう。

WordPress内で行われる様々な処理をさせるためのアクションフックを設けるための関数です。
アクションフックがないとせっかく導入したプラグインが動作しなかったり、管理バーが表示されなかったりするので忘れずに用いてください。

ワードプレスの本体やテーマ、プラグインなどにアクションフックを用意することで、
「特定のタイミングで処理させる」ことができます。
ここがヘッダーですよ、ここがフッダーですよ、と、アクションフックがある部分で処理を実行させることができます。

ワードプレスの自作テーマで最新の記事を特定の場所に表示させるための関数と記述例

記事の出力を行いたい時にはどのような関数を用いればよいのでしょうか？WordPressで記事を表示したい部分に用いる関数の例を一覧で紹介します。

WordPressがデータベースから呼び出す記事データをテンプレートファイル内で表示するためにはループ処理を行います。

このループ処理は、「メインループ」と「サブループ」の表示方法の２つに分けられています。

では、メインループとサブループの関数の記述を紹介していきます。

ワードプレスのメインループとは

以下はワードプレスのメインループです。
投稿や固定ページのテンプレートファイル内で使用することで
ページタイトルや本文の内容を表示できます。
投稿を表示するためのループのことをメインループと呼びます。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

　　// ループの中身

<?php
    endwhile;
else : echo '記事がありません';
endif;
?>

ワードプレスのサブループとは

メインループ以外の条件で投稿を表示させたい場合に使います。
新しいオブジェクトnew WP_Queryを作り、その中に配列で条件を指定します。
以下の記述では、「投稿」から「4件」という条件になります。
サブループはメインループと違い、最後に「wp_reset_postdata();」で、ループの終わりにクエリを終わらせる必要があります。

代入する箱は、＄任意名　でOKです。私は分かりやすく　blog_query　 にしています。
array は配列という意味を持ちます。
'post_type' => 'post' にしたのは投稿ページを指定しています。
’posts_per_page’ => '3' は表示させた項目の数を指定しています。

その後の記述では　$blog_query　を　ハイフンダイナリカッコ（->)で　have_posts  と  the_post  の手前にもおく

<?php if ($blog_query->have_posts()) : while ($blog_query->have_posts()) : $blog_query->the_post(); ?>

これでサブループの完成

<?php
$blog_query = new WP_Query(
    // ここに抽出したい条件を設定します
array(
 'post_type' => 'post',
 'taxonomy' => 'post_category',
 'posts_per_page' => '3',
)
);
?>

<?php if ($blog_query->have_posts()) : while ($blog_query->have_posts()) : $blog_query->the_post(): ?>

        // ここに処理内容を入れます

    <?php 
endwhile;
else : echo '記事がありません';
wp_reset_postdata();
endif; 
?>

トップページに最新の記事を表示させる記述例

トップページに最新の記事を表示させるためには「メインループ」を使います。表示させる記事数は、ワードプレスの管理画面から設定します。
今回は、最もシンプルでよく使われるアイキャッチ画像、記事タイトル、投稿日、で構成されている最新の記事を作成します。

<div class="blogbox">
<div class="blog_wrap">

 <!-- メインループの開始 -->
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
    <a href="<?php the_permalink(); ?>">
      <article>
     　  <!-- アイキャッチ画像の表示 -->
     　　<?php if (has_post_thumbnail()) {
         the_post_thumbnail('thumbnail');
         } ?>
         <!-- 記事タイトルの表示 -->
         <h2 class="blogarchive_title"><?php the_title();　?></h2>
         <!-- 投稿日時の表示 -->
       　<p><?php the_time('Y/m/d');  ?></p>
       </article>
    </a>
    
 <?php
 endwhile;
 else : echo '記事がありません';
 endif;
 ?>
  <!-- メインループの終了 -->

</div>
</div>

トップページに最新の記事を表示させたら最後に、クリックしたら記事ページに飛ぶようにしたいので、Aタグで囲ってあげましょう。テンプレートタグで、 the_permalink();　というものがあります。これは、記事のURLを出力する為の関数です。上記の記述例を参考にAタグでarticleタグを囲ってあげたら保存をして、ブラウザを確認してあげます。

ただこれでは、リンクが飛ばせるようにはなったけどまだ記事詳細ページには飛ばないので、single.php　のテンプレートファイルを新しく作成しsingle.php にもループ処理を記述してあげる必要があります。

ヘッダー・フッターを出力する関数

共通のテンプレートをファイルに切り分けて出力し、ヘッダーやフッターを表示したい場合には次のような関数を用いることができます。

参考にしながら必要に応じてテンプレートパーツを作っていきましょう。

functions.phpで便利機能を有効化する関数の記述例

WordPress にはもともと色々な機能が用意されているのですが、functions.php で有効化してあげないとそれらは管理画面に表示されないようになっています。
アイキャッチ画像機能やカスタム背景機能、ウィジェット、フィードリンクの自動出力などさまざまなWordPressの機能を有効化するために使える関数の記述を紹介しましょう。

アイキャッチ画像有効化

ウィジェットを有効化

作成したテーマでウィジェットを利用するには register_sidebar() を使って機能を有効化します。
register_sidebar() は「サイドバー」を定義する関数です。

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

便利機能は使うとよりスムーズにWordPressを扱えるようになりますが、忘れがちな部分です。

カスタムテンプレートの追加作成をする方法

独自のテーマを作成し、カスタムしたテンプレートとは違う固定ページを作成したい時の方法も解説します。
親テーマとは違う新しいテンプレート名でphpファイルのフォルダ内に新しいファイルを作成してください。フォルダの冒頭には次のコードを記述します。

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

基本的なテンプレートファイルとは別に複数のカスタムテンプレートファイルを作成すると、固定ページを作成したり編集したりするときに選択できるページテンプレートの幅が広がります。

初めて自分でWordPressのテーマを作成するという方向けに、Wordpressの独自テーマを作成するときによく使う関数や記述例をまとめました。忘れがちな便利機能の関数も多いので、ぜひ参考にしていただければと思います。

特定のテンプレートファイルのURLを呼び出す「home_url関数」

まず、トップページのURLを呼び出すのは、home_url()；という関数をがあります。これはホームのURLを取得する記述です。この関数を使ってトップページへ推移させることができるのですが、トップページ以外の特定のページにもこの関数を使って推移させることができます。

以下は、WordPressでホームへのURLや任意のページへのURLを取得するための記述になります。

home_url関数と一緒につかうエスケープ処理とは？

もうすこしホームユーアールエル関数について詳しく説明していきます。
home_url関数には、esc_url関数 と一緒書かれています。escは、エスケープと呼びます。URLをエスケープするesc_ur関数でエスケープ処理してあげます。esc_urlはURLをエスケープした文字を返すこを目的として使われていて、どういうことかというと、エスケープ処理とは、
セキュリティ的に問題のない文字に加工する処理だと思ってください。そのまま出力されると問題のある文字を安全な文字に加工する作業です。
これは「サニタイズ」（無害化）とよばれる工程で、サイトのセキュリティ対策として重要な工程です。
PHPに慣れていないと思い付かない作業かもしれませんが覚えてきましょう。

長時間パソコンと向き合う方におすすめした優秀ガジェットまとめ

BoYataの「ノートパソコンスタンド」

私が購入したのは、BoYataの「ノートパソコンスタンド」。

肩こりには無縁の正しい姿勢で作業ができ、効率的に生産性を高めることができる「Boyataのスタンド」です。
家で使うのがメインで持ち運びはしない方、これは買いでしょう。アルミ製のしっかりしたスタンドです。
最大の利点は、高さや角度を細かく変えられること。
最小高度6cm～最大高度25cm、傾斜角度0°～45°まで自由自在に調整ができます。
そしてサイズ感はこんな感じです。

ちなみに耐荷重は20kg。とにかく安定感バツグンで、そのままタイピングしても揺れはありません。

人間工学に基づき設計されているらしく、姿勢が改善されるというもので
デスク作業は無意識に背筋が曲がってしまっている方多いと思うので、私もその一人でした。
かなり作業時の姿勢は改善されるので長時間のリモートワークが快適になります。
格段に仕事や作業のスピードが上がっているのが実感できます。
今まで辛かった首の痛みや肩こりの悩みが解消される人もいるんじゃないかなと思います。

オーディオテクニカ ATH-CKR30 カナル型イヤホン

仕事しながらどうしてもイヤホン使わないといけない時ってありますよね。
そういう時、安くていいから高品質なイヤホンがほしい。
このオーディオテクニカのイヤホンは、中価格帯の有線イヤホンにあります。
「Sound Realityシリーズ」の製品でありクリアで自然な音が出る
耳の奥までフィットする角度の構造で装着感と遮音性が良い
イヤホンポーチが付属。カラーバリエーションは６種類と豊富で
ナチュラルな音質なのが特徴です。私はこのイヤホンが安くて音質よくてお気に入りです。

色の種類（６種類） ブラック・イエローゴールド・シャンパンゴールド・ピンク・ブルー・レッド

TP-link bluetooth USB　アダプタ　5.0対応

コードのないデスク周りを目指すならハードウェアはbluetooth接続がおすすめです。
しかし自作PCは基本的にbluetooth機能は搭載されていないので、その場合はUSB端子にアダプタをつけて使います。このTP-linkのアダプタは、bluetooth接続の安定性、認識のしやすさなど、特に問題なかったのでおすすめです。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。

佐藤先生