こんにちは、佐藤優里 (@engneerlabo)です。
フリーランスWebデザイナーとして主にホームページ制作・管理をしています。
このブログでは、自作でオリジナルテーマを作成する方法ワードプレスで使う関数・テンプレートタグの記述について解説していきます。
この記事の内容
自作でオリジナルテーマの作り方準備編
実際の記述方法
別ページにリンクを飛ばす
ブログ機能をつくる
WordPressのオリジナルテーマを作成する前に、コードエディタのインストールが先です。インストールがまだの方はこちらの記事で解説していますので準備しましょう！ こんにちは、佐藤優里 (@engneerlabo)です。 フリーランスWebデザイナーとして主にホームページ制作・管理をしています。 このブログでは、VScodeのインストール方法と必須拡張機能９選に ... 続きを見る
ホームページ作成をする人は必見！VScodeのインストール方法と必須拡張機能９選！beautifyは神拡張機能なので使い方を覚えよう
WordPressのテーマを自分で作成する、と聞くととても難しそうなイメージを持ちますよね。しかし、使う関数や利用できる便利機能を導入する記述例などを知っていれば、WordPress初心者でも作成することができます。Wordpressの知識はあまりないから不安という方でも、オリジナルのテーマを作成するために使える関数や記述を紹介しますので、お役立ていただければと思います。
目次
自作でオリジナルテーマを作るには、はじめに最小構成にテーマ定義コメントを記述する
WordPressで独自のテーマを作製したいときの方法を紹介します。WordPressのテーマを構成している最小ファイルは「style.css」と「index.php」の二つです。
「wp-content/themes/」の中に作成したい独自テーマのフォルダを作ります。まず、「style.css」の冒頭に以下のコードを記述することにより、自動的に独自テーマについての情報を記録している保存場所、つまりディレクトリとして認識してくれます。
@charset "UTF-8";
/*
Theme Name: テーマの名前
Theme URL: テーマのサイトのURI
Description: テーマについての簡単な説明
Author: テーマの作者
Version: テーマのバージョン
Tags: テーマの特徴となるキーワード（カンマ区切りで複数OK）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/
子テーマを作成する時には、親テーマとの関連性が必要なので、最後の行に「Template: 親テーマのディレクトリ名」を追記してあげてください。
動画のほうが分かりやすいという方はこちらでも解説しております。
↓↓
@charset"UTF-8";とは
＠charaset"UTF-8";とは、文字エンコーディングを行うために記述します。2行目以降にテーマの基本的な情報である上記を記述していきます。
テーマの名前は必須ですが、それ以外の情報はなくても独自テーマを作成するためのフォルダとして認識されるため、あとから追記する方法でも構いません。
親テーマだけではなく、子テーマを作成するのであれば親テーマとして使いたいフォルダに名前を付けて入力しておくことをおすすめします。
ディレクトリから正しくパスを出力するには？
続いて、テーマのディレクトリからパスを出力するための関数を用いて、各ファイルへパスを通せるようにコーディングしていきましょう。
ワードpressのURLはアクセスしたURLやリクエストに応じてテンプレートの表示を判断しているため、htmlの通るパスとアクセスしたURLで見るパスが異なり、正しく読み込みできない状況が生じます。ですからテーマの定義が記録されているディレクトリのパスを出力するための関数が必要なのです。
＜子テーマのスタイルシートディレクトリのパスを出力する関数＞
<?php echo get_stylesheet_directory_uri(); ?>
＜親テーマのディレクトリからパスを出力する関数＞
<?php echo get_template_directory_uri(); ?>
<?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で記事を作製しようと思ってログインしても、管理バーが表示されない場合はどうすればいいのでしょうか。
テンプレート内への関数記述が必要です。
各テンプレートファイルに次の関数を記述しておきましょう。
/* head閉じタグの手前に */
<?php wp_head(); ?>
/* body閉じタグの手前に */
<?php wp_footer(); ?>
WordPress内で行われる様々な処理をさせるためのアクションフックを設けるための関数です。
アクションフックがないとせっかく導入したプラグインが動作しなかったり、管理バーが表示されなかったりするので忘れずに用いてください。
ワードプレスの本体やテーマ、プラグインなどにアクションフックを用意することで、
「特定のタイミングで処理させる」ことができます。
ここがヘッダーですよ、ここがフッダーですよ、と、アクションフックがある部分で処理を実行させることができます。
ワードプレスの自作テーマで最新の記事を特定の場所に表示させるための関数と記述例
記事の出力を行いたい時にはどのような関数を用いればよいのでしょうか？WordPressで記事を表示したい部分に用いる関数の例を一覧で紹介します。
/* 表示する記事の有無を確認 */
<?php have_posts(); ?>
/* ループしながら次に表示する記事を関数で出力できるようにする*/
<?php the_post(); ?>
/* タイトルを出力する為の関数 */
<?php the_title(); ?>
/* 本文を出力する為の関数 */
<?php the_content(); ?>
/* 投稿日を出力する為の関数 （同日に投稿する記事がある場合一方にしか表示されない）*/
<?php the_date(); ?>
/* 投稿日を出力する為の関数（同日に投稿する記事がある場合でも表示される） */
<?php the_time('Y/m/d'); ?>
/* 記事のURLを出力する為の関数 */
<?php the_permalink(); ?>
/* 記事のアイキャッチ画像を出力する為の関数 */
<?php the_post_thumbnail(); ?>
/* 記事の本文一部だけ抜粋して出力する為の関数 */
<?php the_excerpt(); ?>
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 にもループ処理を記述してあげる必要があります。
ヘッダー・フッターを出力する関数
共通のテンプレートをファイルに切り分けて出力し、ヘッダーやフッターを表示したい場合には次のような関数を用いることができます。
/*header.phpを出力 */
<?php get_header(); ?>
/*footer.phpを出力 */
<?php get_footer(); ?>
参考にしながら必要に応じてテンプレートパーツを作っていきましょう。
functions.phpで便利機能を有効化する関数の記述例
WordPress にはもともと色々な機能が用意されているのですが、functions.php で有効化してあげないとそれらは管理画面に表示されないようになっています。
アイキャッチ画像機能やカスタム背景機能、ウィジェット、フィードリンクの自動出力などさまざまなWordPressの機能を有効化するために使える関数の記述を紹介しましょう。
アイキャッチ画像有効化
<?php
// 記事のアイキャッチ画像機能を有効化
add_theme_support( 'post-thumbnails' );
ウィジェットを有効化
作成したテーマでウィジェットを利用するには 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を取得するための記述になります。
<nav>
<ul>
<a href="<?php echo esc_url( home_url() ); ?>">ホームへ戻る</a>
<li><a href="<?php echo esc_url(home_url('/menu/')); ?>">メニュー</a></li>
<li><a href="<?php echo esc_url(home_url('/price/')); ?>">料金表</a></li>
<li><a href="<?php echo esc_url(home_url('/contact/')); ?>">お問い合わせ</a></li>
</ul>
</nav>
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接続の安定性、認識のしやすさなど、特に問題なかったのでおすすめです。
- Bluetooth 5.0対応 アダプター UB5A
- [サイズ] 14.8 × 6.8 × 18.9 mm 高性能ながら、持ち運びに便利な超小型ナノサイズ
- [対応OS] Windows 11/10/8.1/7に対応
です。フリーランスWebデザイナーとして主にホームページ制作・管理をしています。このブログでは、自作でオリジナルテーマを作成する方法ワー){kind=link}