【初心者向け】WordPressテーマの自作方法を徹底解説!
この記事では、WordPressでオリジナルテーマを自作する手順を解説していきます。
知ってた?WordPressの「テーマ」って、実は簡単につくれちゃうんだぜ?
そんなこと言って実は難しいんでしょ~?
複雑なカスタマイズをしようとすると難しくなるけど、HTML/CSSでコーディングすることができる人なら、そこまで難しくないぜ!
手順を細かく覚える必要もないしね。
いちから説明するから、パソコン片手に聞いてくれよな!!
テーマ制作のための準備をしよう
前提知識
オリジナルのデザインをWordPressに反映するなら、最低限HTML/CSSがコーディングできる状態になっていたいね。
HTML・CSSは、Web食いの別記事で解説してるから、HTML/CSS基礎を学びたい人は見てみてクレクレ!
WordPressって、PHPっていうプログラミング言語でできてるんでしょ?
PHPはできなくてもいいの?
もちろん、PHPもできた方が良い!
けど、初心者にとって、PHPはHTML/CSSよりハードルが高いから、WordPressのテーマを作りながら習得していくぐらいでも良いと思うぜ!
一応、PHPの基礎が学べる記事もリンク紹介しとくぜ!
PHPの基礎、全然頭に入らない…
だよね~。とにかくさっさとWordPressのテーマ作りたいって人は、いったん以下だけ覚えておこう!
<html>
<h1>PHPの書き方</h1>
<p>ここからPHPがはじまるぜ~!</p>
<?php
ここにPHPプログラムを記述;
?>
<p>PHPの処理、終わったぜ~!</p>
</html>
最低限おさえておきたいのは、以下2点だ!
①PHPは、HTMLと一緒に書ける!
※ただし、PHPを動かすには環境構築が必要。
②PHPは
<?php
で始まって、
?>
で終わる!
この2点のみの理解だと、ゴリゴリのカスタマイズは難しいけど、何とかテーマ自作は進められるはず!
HTMLという女の中に、PHPという男が侵入していく感じね。
妄想がエグいぜ!
WordPressテーマの作成に必要なものは?
WordPressのテーマ制作に必要なものは、これだ!
- WordPressに反映したいHTMLやCSS
- HTMLで利用しているデータ(画像など)
- WordPressのローカル環境開発ツール
(3)の「ローカル環境開発ツール」って何?
WordPressをインターネット上ではなく、自分のPCの中で動かすツールのことだね。
有名どころでいうと、「XAMPP」「VCCW(リニューアル中)」「LOCAL」とかかな。
今回は、「XAMPP」でローカル環境が整っている+WordPressがインストールされているということを前提に進めていきます。
ローカル環境の構築方法・WordPressのインストールについては、以下外部サイトの記事を参考にしてみてくださいね。
https://webgui.jp/designer/xampp%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%a8%e4%bd%bf%e3%81%84%e6%96%b9/
▼XAMPPでワードプレスのインストール方法!設定やその使い方を分かりやすく解説▼
https://tabibitojin.com/pc-xampp-wordpress-install/
テーマファイルの基盤を作ろう
WordPressが設置されているフォルダを開くと、以下のような構成になっていることがわかるかな?
今回はこのファイルの中の、「wp-content」の中に色々と手を加えていくよ。
wp-adminとかwp-includesとかは、触らないの?
そうね、基本的には触らないぜ。
WordPressのファイルをイジイジするときは、wp-content内のファイルをいじる!ってことを覚えておこう!
かしこまった!
wp-contentの中に、themesっていうフォルダがあるけど、ここにオリジナルテーマ用のファイルを入れていく感じ?
その通り、鋭さビンビンだぜ!
それじゃあ早速、wp-contentの中にある、themesを開いてみよう。
まず、wp-content/themes内に新しいフォルダーを作ります。
この時のフォルダー名が、今回作成するテーマの名前になります。
以下の写真では、「test」という名前のテーマを作るものとして実際に作成したものです。
やった!themesフォルダーの中に作ったし、もうこれで完成じゃん!解散!
いや、そんなわけあるかぁ~!
今作ったフォルダの中には、まだ何もファイルが入っていないよね?
その中に、テーマに必要なパーツを入れていかなきゃいけないんだ。
うん、焦らさなくていいから、早く必要なファイルを入れさせてよ!
焦らしてねえわ(笑)。
まずthemes/test内に作りたいファイルは、「index.php」と「style.css」のふたつだ!
「style.css」については、CSS基礎を習ったときに作ったから用意できるけど…
「index.php」ファイルなんて作ったことないよ~。
怖がらなくて大丈夫、僕を信じて。
君が持っているHTMLファイルをPHPにすれば良いだけさ。
例えば、「index.html」っていうファイルだったら、「index.php」にすれば良いだけ。
拡張子を変えるだけでOKなんさ。
え?変えようとしたら、こんなエラー▼でたけど、本当に大丈夫?データ破損したりしない?
「はい」を選んで大丈夫さ。
そう簡単には、壊れない。
僕の愛情と一緒さ。
怖かったらバックアップをとっておこう。
さかしの愛情の方が怖いな…
index.phpとstyle.cssを用意したら、themes/test(あなたが作ったフォルダ)の中に入れましょう。
画像も使うなら、images(img)フォルダも作っておくと良いでしょう。
ひゃっほー、オリジナルテーマ完成!!!!
「気が早い!」って言いたいところだけど、実はあながち間違ってないんだよね。
実はもうすでにこれでオリジナルのテーマとして認識されているんだ。
ちょっと確認してみようか。
この時点で、オリジナルテーマを構成する必要最低限の「index.php」と「style.css」があるのでテーマとして認識されています。
WordPress管理画面の[外観] > [テーマ]を確認すると、新しいテーマの(この記事では「test」というテーマ)が追加されていることが分かります。
あれ?画像とか表示されないの?なんか寂しいなあ。
そうだね。
といっても画像を表示させるのは簡単で、さっき自分で作ったオリジナルテーマフォルダ(index.php及びstyle.cssが入っている場所)に、「screenshot.png」という名前の画像ファイルを追加すればOKさ!
こんな感じかな?
良い感じ!
あ!!WordPressの管理画面の[外観]>[テーマ]を確認したらきちんと画像が表示されてる!私天才かも!?
天才だよ、好きだ。
このまま、テーマを有効化してもOKなんだけど、一応オリジナルテーマを作る上でルールがあるから、もうちょっと作業してみようか。
私天才だから、余裕のよっちゃんよ!
それで、オリジナルテーマを作る上でのルールっていうのは?
オリジナルテーマに使われるstyle.cssの中には、コメント形式でテーマに関する情報を書くことになっているんだ。
うん、よくわかんないけど、何をどういう風に書けばいいの?
以下をstyle.cssの冒頭に入れればOK!
頻繁に書くものではないし、コピペでOKよ!
@charset "utf-8";
/*
Theme Name: test
Author:webgui
Description:テスト用のテーマ
Version:1.0
*/
こんな感じで、テーマの名前だったり作成者名だったりを書くんだ。
必要な時は調べて追記すればOKよ。
以下のような情報を記載することができるぜ。
Theme Name: | テーマ名 |
---|---|
Theme URI: |
テーマのアドレス |
Author: | テーマの作者名 |
Author URI: | テーマ作者のWebサイトのアドレス |
Description: | テーマの説明・紹介文 |
Version: | テーマのバージョン |
License: | テーマに適用されるライセンス |
License URI: | ライセンスの内容が記載されたWebページのアドレス。またはライセンス条文が記載されたファイルへのパス |
Tags: | テーマの特徴を示すタグ |
Text Domain: | テーマを国際化する際に必要な識別用の文字列 |
style.cssを保存したら、[外観] > [テーマ]から、自作のテーマのプレビューを見てみよう。
あ!今書いた内容が表示されてる!
ちょっと嬉しいね!
僕もキャバコが喜ぶ姿が見れて嬉しいよ。
もう、テーマを有効化していいよね!?
いいぜ、有効化してみようか!
有効化っと!
あれ?プレビューしてみたけど、CSSが適用されてないっぽいよ?
そうなんよ。この段階では、まだ用意したCSSの読み込みが上手くできないんだ。
でも、HTMLの読み込みはできているから、この段階ではこれでOK!
次の「テンプレートタグを記述しよう」の章で、CSSが適用されるように作業をしていくぜ!
テンプレートタグを記述しよう
さてさて。いよいよテンプレートタグの記述だな。
そうやって、すぐ横文字使ってカッコつけるのやめてくれる?
いるよね~「横文字使ってる俺、カッコ良い」って勘違いしてるやつ。
何なの?テンプレートタグって。
テンプレートタグっていうのは、WordPress専用のPHP関数のことだね。
関数?横文字じゃないけど、意味がわかんないよ!
いるよね~「難しい言葉を使ってる俺、カッコ良い」って勘違いしてるやつ。
そんなツンツンすんなよ~
関数っていうのは、ひとことで言うなら、「処理の固まり」ってイメージかな。
例えば、「WordPress管理画面で投稿した記事のタイトルを取得して表示する」とか、「投稿した記事のカテゴリを取得して表示する」とかね。
まだ、あんまりイメージわかないなぁ。
今の時点でイメージするのは難しいかもだから、「テンプレートタグを使うと色々できる」ぐらいの認識でOKぜ。
おっけー!とりあえず、やってみるか!
wp_headとwp_footerを記述しよう
index.phpファイルを編集していきます。
index.phpの中の</head>の直前に次のようにwp_head()の記述を追加しましょう。
<?php wp_head(); ?>
</head>
元々がhtmlファイルだったため、index.phpの中には、htmlで記述された文とphpで記述された分が混ざることになります。
次に、index.phpの中の</body>の直前に次のように記述を追加しましょう。
<?php wp_footer(); ?>
</body>
これらのテンプレートタグ(php)は、WordPressが正しく機能するために必要なHTML,CSS,JavaScriptなどのコードを自動的に出力してくれるために必須のコードです。
きちんと書けたかな?
書き足すだけだからね!これくらいならOKよ!
そっか。そしたらこんな感じの作業を続けていくぜ。
言語属性を出力しよう
特定の言語環境での使用しか想定していない場合(日本語のみのサイトの場合)、この作業は必須ではないです。
多くの言語での使用を前提としたWordPressには、言語属性を適切に出力するためのテンプレートタグが用意されています。
index.phpの冒頭にある<html>を
<html <?php language_attributes(); ?>>
に書き換えます。次に、<head>内にある<meta charset=文字コード>を
<meta charset="<?php bloginfo( "charset"); ?>">
に書き換えます。
bloginfoを使ってみよう
上記言語属性の設定で、bloginfoテンプレートタグを使いました。
bloginfoはcharset以外にも様々な引数を指定できます。
以下はほんの一例ですが、よく使うのでbloginfoという名前だけは覚えておくと良いでしょう。
name | サイト名 |
---|---|
description | キャッチフレーズ |
charset | 使用文字コード |
language | 使用言語 |
例えば、
<?php bloginfo( "name" ); ?>
と書くと、以下設定画面で入力した赤枠の文字が表示されます。
実際にbloginfoテンプレートタグを使用して、index.phpを編集してみましょう。
例えば、以下のHTMLがあったとします。
<html>
<body>
<header class="header">
<h1 class="site-name">俺のサイト名称</h1>
<p class="description">君に伝えたい想いがある</p>
</header>
<main class="main">
<p>俺の想いは50回言わないと伝わらない。だから会いに行くよ、50回。</p>
</main>
</body>
</html>
上記を書き変えると、以下のようになります。
<html>
<body>
<header class="header">
<h1 class="site-name"><?php bloginfo( "name" ); ?></h1>
<p class="description"><?php bloginfo( "description" ); ?></p>
</header>
<main class="main">
<p>俺の想いは50回言わないと伝わらない。だから会いに行くよ、50回。</p>
</main>
</body>
</html>
bloginfo( “name” )
も
bloginfo( “description” )
も、使う必要がなければ、index.phpに書かなくてOKだぜ!
body_classでページに合わせたclassを出力しよう
index.phpの中の<body>を以下のように書き換えます。
<body <?php body_class(); ?>>
これによって、現在表示しているページの条件や状態に合わせたclass名を出力することができるようになります。
画像リンクを正しく出力する
現時点では、画像やcssファイルなどのリンクが全て切れている状態かと思います。
これは、各ファイルの位置が全て相対パスで記述されていることに原因があります。
そこで、テンプレートタグを使用することで、それらの相対パスを絶対パスに書き換えていきます。
ヘッダーおよびフッターの<img src=”~~~~”>の~~~~の部分(本来、相対パスが指定されていた場所)を、以下のように書き換えてください。
<img src="<?php echo esc_url( get_theme_file_uri( "images/logo.png" ) ); ?>" alt="ロゴだよ">
images/logo.pngの部分は、読み込みたい画像を書くんだぜ!
全ての画像に適用していこう!
サイト内リンクを正しく出力する
次に、管理画面内の[一般設定] > [サイトアドレス(URL)]の値を出力します。
index.phpの中の、ホーム画面に遷移させたいリンク(<a>タグ)部分のhref属性を以下のように書き換えます。
<a href="<?php echo esc_url( home_url( "/" )); ?>">
これで、一般設定のサイトアドレスに指定しているURLが出力されます。
これと同じ要領で、index.phpの中にあるサイト内リンクを以下のように書き換えていきます。
例▼
<a href="~~~/profile/">PROFILE</a>
↓
<a href="<?php echo esc_url( home_url( "/profile/" ) ); ?>">PROFILE</a>
<?php echo home_url(“/profile/”); ?>
って書くだけでもURLが出力されるけど、esc_url()でhome_url()を囲うのも忘れないようにしようぜ!
これはセキュリティ的に重要なんだ。
今は細かく解説しないけど、URLを出力するときはesc_url()で囲うってことを頭に入れておこう!
CSSを適用させる
style.cssの正しいパスを出力するために、index.phpを書き換えていきましょう。
以下の例に従って、CSSの相対パスを書き換えます。
例▼
<link rel="stylesheet" href="~~~/style.css">
↓
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() );?>">
お疲れぇい!
頭がパンクしそう。。。
PHPが混ざってくるとヘロヘロになるよね。
でも、この作業ができたのであれば山場は超えたと思ってもらって大丈夫だよ。
え?本当?
本当さ、ブラウザでサイトを表示してみな。
あ!私が用意したhtmlとCSSがきちんと反映されてる!
そう。ここまで作業をすれば見た目はもう完璧なんだ!
意味あり気な言い方…
このままだと、ウィジェット機能とかが使えないからWordPressのテーマにした意味があんまりないんだよね。
また、新しい用語が出てきた…
まぁ、便利な機能を使うには、まだ作業が必要ってことね!
そういうこと!次の章のfunctions.phpを実装すれば、それらもできるようになるから、気を抜かずに作業していこう!
余裕のよっちゃんよ!
functions.phpファイルを作成しよう
functions.phpって、何なん?
functions.phpは簡単に言うと、WordPressテーマの拡張機能を有効化したり、テーマ独自の機能を実装したりするためのファイルなんだ。
へ~さっきみたいに、index.phpの中に書いていくの?
いや、functions.phpは、それ独自で作るよ。だから、いちから作らなきゃいけないね。
え!?いや私、phpなんて書けないって!さっきまではhtmlを書き換えるだけだったからできたけど!!
大丈夫だ。問題ない。
まず、使い慣れたテキストエディターでfunctions.phpっていう名前のphpファイルを作ってみて!
テキストエディターって、メモ帳とかでいいの?
あ!ごめんごめん。なるべくメモ帳は使わないほうがいい!
えーなんでよ?
メモ帳は、文字コードの指定ができないからね。
今回は、文字コードを「UTF-8」にしてほしいから、メモ帳は使わないでね!
は~~~~~い。
「UTF-8」で文字コード指定して、名前は「functions.php」ね。
できたけど、これをどこのフォルダに入れるの?ゴミ箱?
そんなわけあるか。
作ったら、自分のテーマフォルダ直下に入れてね。
今回でいうと、「test」フォルダーの中だから、index.phpとかと同じ場所!!
あ、それなら分かりやすい!OKできたよ!
よし!いい感じだね!
で、functions.phpを読み込むにはどうしたらいいの?
実は、設置した段階で読み込まれてるんだけど、本当に読み込まれてるかどうか確認しようか。
functions.phpの中に以下のコードを書いてから、ブラウザで見てみて。
<?php echo "テスト"; ?>
あ!「テスト」って文字が出た!
よし、これで読み込みの確認はできたぜね。
確認できたら、上記は消してOKよ。
こっから、また地味にコツコツ細かい設定を書いていこ~
サイトコンテンツの幅を指定する
サイトコンテンツの幅って?
以下の部分だぜ!
functions.phpに、以下のコードを追記します。
<?php
// コンテンツ幅をセット
if( ! isset( $content_width ) ) {$content_width = 725; }
web食いでは、725pxにしてみたけど、サイトによって調節してね。
issetっていう謎のキーワードでてきたけど?
issetは、変数の中に値が入っているかを調べる関数だね。
上記のコードだと、すでに$content_widthに値が入っている場合は、上書をしないって意味だよ。
へ~難しいぜ、ちくしょう!
ひとつひとつの意味を完全に理解はしなくてもいいから、今はガンガン進めていこう!
このコンテンツ幅を設定するとどうなるの?
$content_widthを指定すると、画像を投稿した際に、サイズをコンテンツの幅に合わせて最適化できるようになるんだぜ~!
なんかよくわかんないけど、設定しておいて損はないってことね!
head内にフィードリンクを追加する
https://www.asobou.co.jp/blog/life/rss-2
wp_headタグが出力するコードにRSSフィードURLの出力を追加するには、function.phpに次のコードを追記します。
function custom_theme_setup() {
add_theme_support( "automatic-feed-links");
}
add_action("after_setup_theme","custom_theme_setup");
RSS出力が不要だったら、これは書かなくてOKよ。
…もう、全部意味不明。
うん、これはコピペでOK。
僕もいちいち細かく書き方は覚えてないよ。
都度調べながらコピペしてる。
今回知っておいてほしいのは、2点。
(1)functionで定義した関数を「ユーザー定義関数」っていうのね。
上記でいう「function custom_theme_setup()」が、それなんだ。
(2)そして、ユーザー定義関数は、add_action()で呼び出さないと動作しない
ってとこ。
う~パンク寸前だけど…
function xxxxxx()っていう記述を書いたときは、どこかにadd_action()も書く必要がある、ってこと?
そういうこと!それだけ覚えてりゃ、十分さ。
それじゃあ、どんどんfunctions.phpを充実させていこう!
タイトルタグを自動出力する
index.phpの中に<title>タグはありますか?
通常HTML/CSSでサイトを作ると、<title>タグも置くことが多いですよね。
この<title>タグを自動で調整して出力されるように設定します。
先ほど作成したfunction_theme_setupに一文を追記しましょう。
function custom_theme_setup() {
add_theme_support( "automatic-feed-links");
// 以下1行を追加
add_theme_support( "title-tag" );
}
この設定をすることで、wp_head()で<title>タグが自動出力されるようになります。
ゆえに、index.phpの中のtitleタグは不要になるので、index.phpを開き、<title>~</title>を削除しましょう。
埋め込みコンテンツをレスポンシブ対応にする
初期状態では、YouTubeブロックなどの埋め込みコンテンツのレスポンシブ対応がされていないので、add_theme_support( “responsive-embeds”);を追記して有効化します。
function custom_theme_setup() {
add_theme_support( "automatic-feed-links");
add_theme_support( "title-tag" );
// 以下1行を追加
add_theme_support( "responsive-embeds");
}
add_action( "after_setup_theme","custom_theme_setup");
独自のCSSをfunctions.phpで読み込む
最後に、あなた独自のCSSをfunctions.phpから読み込むようにします。
先ほど、index.phpにて、CSSを読み込む部分を書き換えたばかりですが、WordPressのコーディングの規約では、テーマで利用するCSSファイルは、wp_enqueue_style関数を使い、function.php内で定義することが推奨されています。
この作業をしなくても見かけ上は問題ありませんが、後々プラグインなどを入れたときに、規則通りに書いていないとエラーを起こしてしまう可能性があります。
なので、テーマのCSSファイルであるstyle.cssは、index.phpではなくfunction.phpで読み込むようにしておきましょう。
①index.phpからCSSを読み込む部分を削除します。
<!-- この部分を消す -->
<link href="style.css" rel="stylesheet">
②次に、functions.phpの最後に、以下の関数を記述してください。
function css_scripts() {
wp_enqueue_style("base-style",
get_stylesheet_uri(),
array(),
"1.0",
"all"
);
}
add_action( "wp_enqueue_scripts" , "css_scripts" );
これで、functions.phpにCSSを読み込む関数を追加することができたぜ!
途中でなんども心が折れかけた。というか折れた。
色々と専門用語も多いし、疲れっぺよね。
他のCSSを読み込むには、どうしたらいいの?
wp_enqueur_style…の部分を増やせばOKよ!
例えば、top.cssを追加するとしたら、こんな感じ▼
function css_scripts() {
wp_enqueue_style("base-style",
get_stylesheet_uri(),
array(),
"1.0",
"all"
);
wp_enqueue_style("top",
get_template_directory_uri() . '/css/top.css',
array(),
"1.0",
"all"
);
}
add_action( "wp_enqueue_scripts" , "css_scripts" );
コピペした後の変更点は2箇所だね。
- “base-style” → ”top”
- get_stylesheet_uri() → get_template_directory_uri() . ‘/css/top.css’
これで、作ったテーマのcss/top.cssが読み込まれるっちゅうわけさ!
これは覚えられないけど、毎回コピペでいいの?
そうだね、頻繁に書く部分ではないし。
僕も覚えてないからコピペで対応してるぜ!
そっか、ちょっと安心!
上記記載をしてもCSSが読み込まれない場合は、記載が間違っている可能性があるぜ。
ブラウザで「Ctrl + U」を押して、HTMLソースコードを表示・確認してみよう!
独自のJavaScriptをfunctions.phpで読み込む
JavaScriptもfunctions.phpで読み込ませられるの?
そうともさ!CSSと似たような書き方で読み込ませられるぜ!
以下をとりあえずコピペしちゃってくれっ!
function js_scripts() {
wp_enqueue_script('script',
get_template_directory_uri() . '/js/script.js',
array()
);
}
add_action( 'wp_enqueue_scripts', 'js_scripts' );
上記例だと、作ってくれたテーマフォルダの中の js/script.js が読み込まれる形だぜ!
例えば、js/hello.jsを追加で読み込みたい時は、こんな感じ▼
function js_scripts() {
wp_enqueue_script('script',
get_template_directory_uri() . '/js/script.js',
array()
);
wp_enqueue_script('hello',
get_template_directory_uri() . '/js/hello.js',
array()
);
}
add_action( 'wp_enqueue_scripts', 'js_scripts' );
<head>タグのところに <?php wp_head(); ?> って書いたの覚えてる?
そんなの書いたっけ?
ここまで手順どおりに実装していれば、書いてるはず!
上記で指定したjavascriptファイルは、wp_head()と書かれているところで読み込まれるんだ!
ふんふん、なるへそ。
でも、javascriptファイルを</body>の直前で読み込みたいって時もあるんだ。
なんでよ?
javascriptファイルが読み込まれている間、HTMLとか画像とかの読み込みが待たされてしまうからね。
なるべくjavascriptは最後に読み込むのが良いんだ。
じゃあ、どうやるの?
さっきのJS読み込みにちょっと文字を足せばOKさ▼
function js_scripts() {
wp_enqueue_script('script',
get_template_directory_uri() . '/js/script.js',
array(),
"1.0",
true
);
wp_enqueue_script('hello',
get_template_directory_uri() . '/js/hello.js',
array(),
"1.0",
true
);
}
add_action( 'wp_enqueue_scripts', 'js_scripts' );
何が変わったの?
array()の後ろにカンマが付いて、その下に ”1.0″, true という文字が追加されたんだ。
1.0というのはバージョンだから、好きな値を付けてOK!
最後の部分をtrueとすることで、wp_footer()でjavascriptファイルが読み込まれるようになるぜ!
wp_footer()って???
これも本記事の手順どおりに実装してれば、</body>の前に<?php wp_footer(); ?>っていうのがあるはずだぜ!
あ、ほんとだ。これでjavascriptの読み込みは良い感じだね。まだよくわかってないけど。
大丈夫、とりあえず動いておけば良しとしよう!
次の章では、各パーツを共通化していくぜ。
また、難しそうなことを…
大丈夫、優しく手取り足取り説明していくぜ!
私には触れない形でお願いします。
各パーツを共通化しよう
普通のウェブサイトって、トップページでも下層ページでも、「共通して利用しているパーツ」があるよね?
ヘッダーとかフッターってこと?
そう!
HTMLとCSSだけで複数のページを作ると、全ページにヘッダーとフッターのソースを書くことになるよね。
これって、実は超非効率なんだ。
なんで?
ページを増やす度に同じソースをたくさん書かないといけないし、修正が必要になったら、全ページのソースを直さないといけないっしょ?
おあー確かにね~
そこでだ、各ページ共通しているヘッダーとかフッターは、ひとつのファイルにまとめちゃおう作戦!
僕と一緒に、まとめちゃおうぜ~
誘い方が気持ち悪いから、やり方だけ気持ち良く教えてくれる?
まずheader.phpとfooter.phpファイルを作ろうか!
はい、作った!
さすが!
そしたらindex.phpの1行目から、ヘッダーの終わりまでをコピーしてheader.phpに貼り付けようか。
以下に例を示すぜ。
header.phpの作成例
元々のindex.phpが以下だった想定で、header.phpの作成例を伝えるぜ。
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<h1 class="site-name"><?php bloginfo( "name" ); ?></h1>
<p class="description"><?php bloginfo( "description" ); ?></p>
</header>
<main class="main">
<h2>赤信号でも僕は止まらない</h2>
<p>俺の想いは常に青信号。赤も黄もない。</p>
</main>
<footer>
<p>© 想いを伝えに会いに行く。</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
①index.phpの<!DOCTYPE html>から</header>までをコピーして、header.phpに貼り付ける
header.phpの中身は以下のようになるぜ。
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<h1 class="site-name"><?php bloginfo( "name" ); ?></h1>
<p class="description"><?php bloginfo( "description" ); ?></p>
</header>
②index.phpに、header.phpを読み込むソースを書く
get_header();というテンプレートタグを利用するぜ!
以下は変更後のindex.phpね。
元々書いてあった、<!DOCTYPE html>から</header>までは消してOKだ!
<?php get_header(); ?>
<main class="main">
<h2>赤信号でも僕は止まらない</h2>
<p>俺の想いは常に青信号。赤も黄もない。</p>
</main>
<footer>
<p>© 想いを伝えに会いに行く。</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
これでheaderの共通化終了さ。
index.php以外のページを作るときも、get_header();を使えば、header.phpが読み込めるんだ。
いつでもheaderを読み込む感覚で、僕のことも読み込んで欲しいな。
うん、読み込むのはheaderだけにしとくね。
footerはどうやるの?
footer.phpの作成例
①index.phpの<footer>から</html>までをコピーして、footer.phpに貼り付ける
footer.phpの中身は以下のようになるぜ。
<footer>
<p>© 想いを伝えに会いに行く。</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
②index.phpに、footer.phpを読み込むソースを書く
get_footer();というテンプレートタグを利用するぜ!
以下は変更後のindex.phpね。
元々書いてあった、<footer>から</html>までは消してOKだ!
<?php get_header(); ?>
<main class="main">
<h2>赤信号でも僕は止まらない</h2>
<p>俺の想いは常に青信号。赤も黄もない。</p>
</main>
<?php get_footer(); ?>
index.phpがめっちゃシンプルになった!
だろ?人生もWordPressも、シンプルが1番なのさ!
投稿が表示されるページを作成しよう
今んとこ、トップページしか表示できないけど、管理画面で投稿したページとかはどうやって作ればいいの?
良い質問だぜね。
そんな時に作るのがsingle.phpだ!
早速ファイルを作ろうか。
はい、こうね。
おっけぇ、そしたらsingle.phpを以下のように書いてみてちょ。
<?php get_header(); ?>
<main class="main">
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="wysiwyg-editor">
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
うっ。。。!コピーするだけで吐き気が。。。!
だな(笑)。いっぱいわけわかんないの出てきたね。
よし、ひとつひとつ嚙み砕いていこう。
頼むよ、アニキい
まず、最初のifとwhileの部分ね。
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
これは、WordPressループって呼ばれるものなんだけど、管理画面で投稿したデータを表示するには、このWordPressループっていうのを使う必要があるのね。
ループ?繰り返す的な意味の?
そう。もちろん、これ以外にも投稿データを表示させる方法はあるんだけど、基本はこのWordPressループを使うってのをフワっと覚えといて!
あいよ。
で、このWordPressループを作図すると、こんな感じ▼
「繰り返される部分」は、テーマによってソースが変わるけど、
if ( have_posts() ) :
と
while( have_posts() ) : the_post();
の部分は基本同じなのよ。
だから、これも覚える必要はなくって、「管理画面で投稿したデータを表示させるのはWordPressループ」っていうのだけ覚えておけば、そのときに検索して上記のソースをコピればOK。
まぁ、とりあえず正しいソースをコピペしておけば、表示はされるってことね。
で、「繰り返される部分」の<h1><?php the_title(); ?></h1>とかも教えて欲しいんだけど。
それな!
<h1><?php the_title(); ?></h1>
the_title()は、投稿のタイトルを表示する関数なんだ。
管理画面で入力した、以下の赤矢印の文字が表示されるぜ。
てことは、the_content()は、それ以外の文字を表示するのかな?
ご名答!
<div class="wysiwyg-editor">
<?php the_content(); ?>
</div>
the_content()は、以下で入力した内容が表示されるぜ。
ループ内で表示できるその他のテンプレートタグ
他にも表示させたい情報がある場合は、以下のテンプレートタグを活用してみましょう。
the_title | 投稿のタイトル |
---|---|
the_content | 投稿の本文 |
the_excerpt | 投稿の抜粋分 |
the_permalink | 投稿のリンク |
the_time | 投稿時刻 |
the_category | 投稿のカテゴリー |
the_tags | 投稿につけられたタグ |
the_ID | 投稿ID |
the_author | 著者名 |
固定ページ用のPHPも同じ手順で作れる
WordPressって、投稿の他に「固定ページ」ってあるよね?
固定ページにはsingle.phpが適用されないみたいなんだけど、どうしたらいいの?
ふふ、答えは簡単さ。
page.phpってのを作ればOK!
single.phpの中身をコピペすれば、最低限の表示はできるようになるぜ。
トップページから投稿のリンクを貼ろう
普通、トップページって「お知らせ一覧」とか「ブログ一覧」ってあるよね?
ああいうのは、どうやって実装したらいいの?
ナイスでしびれる質問だぜ!
そうそう!それ実装できないと、一生トップページしか見られない状態になっちゃうよね。
難易度上がるけど、まずはソース例から出すぜ!
<?php get_header(); ?>
<main class="main">
<section class="blog">
<h2 class="headline-blog">投稿一覧</h2>
<div class="wrap">
<?php
$aPosts = get_posts([
'posts_per_page' => 5, // 件数の指定
'orderby' => 'date', // 並び順の対象(date=投稿日時)
'order' => 'DESC', // 並び順を新しい順に
'post_type' => 'post', // 投稿データが対象(pageにすると固定ページ)
'post_status' => 'publish', // 公開されているデータが対象
]);
foreach ($aPosts as $post) {
// HTMLとして表示したい情報をまとめる
$aCategory = get_the_category();
$sCategoryHref = $aCategory[0]->slug;
$sCategoryName = $aCategory[0]->cat_name;
$sPostHref = get_permalink($post->ID);
$sPostTitle = $post->post_title;
$sPostDate = mysql2date('Y.m.d', $post->post_date);
// HTMLとして出力
echo '<p class="contents">';
echo '<a href="' . esc_url($sCategoryHref) . '" class="cat">' . esc_html($sCategoryName) . '</a>';
echo '<span class="date">' . esc_html($sPostDate) . '</span>';
echo '<a class="title" href="' . esc_url($sPostHref) . '">' . esc_html($sPostTitle) . '</a>';
echo '</p>';
}
?>
</div><!--/.wrap-->
</section>
</main>
<?php get_footer(); ?>
うんわ、長ぇ~~~
初めてこんなの見たら、嫌になっちゃうよね。
初心者の場合、最初から全てを理解するのはしんどいから、上記をコピペしてHTMLの部分だけいじる、っていうところからスタートでもOKよ。
一応、以下で細かく解説するけど、初心者は飛ばしてもOK。
何度も読んで繰り返し実装しないと、なかなか頭に入らないから、モチベーション高い時に細かく読んでみるのが吉だぜ。
うん、もう逃げ出したい。
僕からは逃げないで。
よっしゃ、解説していくぜ。
$aPosts = get_posts([
'posts_per_page' => 5, // 件数の指定
'orderby' => 'date', // 並び順の対象(date=投稿日時)
'order' => 'DESC', // 並び順を新しい順に
'post_type' => 'post', // 投稿データが対象(pageにすると固定ページ)
'post_status' => 'publish', // 公開されているデータが対象
]);
まず、get_posts()っていうテンプレートタグがあるんだけど、これは投稿データとか固定ページのデータを取得できるものなのよ。
ふんふん。
$aPosts = っていうのは?
get_postsで取得したデータを、$aPostsっていう名前の箱に入れますよ~っていう指定よ。
詳しく知りたい場合は、PHPの基礎を見直すと良いぜ。
で、2行目(’posts_per_page’ => 5,)以降の部分で、「何件取ってくるか」とか「どのデータを取ってくるか」、「どういう並び順で取ってくるか」とかを指定してるのね。
この細かく指定できる部分のことをパラメータっていうから、取得するデータの絞り込みをかけたいときは、「get_posts パラメータ」で検索すると、情報が出てくるぜ。
get_posts()は、「色んな指定をした上でデータが取得できる」っていう認識で合ってる?
合ってるぜ!
で、get_postsで取得してきた値が$aPostsっていう箱(配列)に入ったら、次の処理だ。
foreach ($aPosts as $post) {
$aPostsに入ってるデータ件数分、繰り返し処理しますよ~というのがforeach。
今回はget_postsで
‘posts_per_page’ => 5
っていう指定があるから、最大5回の繰り返し処理が動く形になるぜ。
$aCategory = get_the_category();
これはカテゴリ―情報を取得するテンプレートタグさ。
$aCategoryには、投稿に関するカテゴリ―情報が入ってる状態になるぜ。
$sCategoryHref = $aCategory[0]->slug;
これは、$sCategoryHrefという変数に、カテゴリ―のスラッグを代入してるんだ。
カテゴリ―のスラッグは、以下の赤枠の部分ね。
$sCategoryName = $aCategory[0]->cat_name;
これは、$sCategoryNameという変数に、カテゴリ―の名前を代入してる。
$sPostHref = get_permalink($post->ID);
これは、投稿のURL(以下赤枠)を$sPostHrefという変数に代入してるぜ。
$sPostTitle = $post->post_title;
これは、投稿タイトルを$sPostTitleという変数に代入してるぜ。
$sPostDate = mysql2date('Y.m.d', $post->post_date);
これは投稿日だね。$sPostDateに代入してる。
はぁ、もうやめて。頭が割れる。。。!
大丈夫、ここからはHTMLの出力だ!まずは、<p>タグの開始を出力しよう。
echo '<p class="contents">';
PHPの基礎でechoを学んでいれば、ここは問題ないはず。
<p class=”contents”>を出力するぜってことだね。
文字を出力するときは、ダブルクオートかシングルクオートで囲う必要がある点、注意だぜ!
echo '<a href="' . esc_url($sCategoryHref) . '" class="cat">' . esc_html($sCategoryName) . '</a>';
ここで、カテゴリ―のURLとカテゴリ―名が出てきたね。
見慣れないのは、esc_url()とesc_html()っていうエスケープ関数。
これは、セキュリティ上大事なものだから、変数の中身がわかっていても、出力時には付けておくことを忘れないようにしよう!
escはescape(エスケープ)の略なんだけど、データを無害化してくれるんだよね。
これは教えてもらわないと、やらずに書いちゃうよね。
ネットに落ちてる情報だと、このエスケープが抜けてるものが多いので、要注意だぜ。
echo '<span class="date">' . esc_html($sPostDate) . '</span>';
これは、日付を表示してるね。
echo '<a class="title" href="' . esc_url($sPostHref) . '">' . esc_html($sPostTitle) . '</a>';
ここで、投稿へのリンクが出てきたね。
echo '</p>';
最後に<p>の閉じタグさ。
やっと説明終わりかぁ~
長かった~!
口が臭かった~!
キャバコを前に緊張しちゃったせいかな!
てへぺろ!
アイキャッチ画像機能を追加しよう
やっと投稿を表示する画面を作れた~!
よし、さらにここから投稿や固定ページを表示する画面をリッチにしていこう!
よく使うのがアイキャッチ画像だ!
アイキャッチ画像って、何ぞ?
アイキャッチ画像っていうのは、投稿ごとにイメージ画像を設定できる機能だね!
このページでいうと、以下がアイキャッチ!
管理画面だと、以下部分で設定できるぜ!
投稿の代表画像みたいな感じだね!早速作らせてよ!
うっしゃ!そしたらまずは、functions.phpからだ!
functions.phpにアイキャッチ画像を有効化するコードを追記
functions.phpの中にfunction custom_theme_setup()を書いたのを覚えてますか?
custom_theme_setup()の中に、add_theme_support(“post-thumbnails”)を追記します。
function custom_theme_setup() {
/* 以下2行を追記 */
add_theme_support( "post-thumbnails" );
set_post_thumbnail_size( 1200, 800);
}
set_post_thumbnail_size( 1200, 800); の1200と800って何?
アイキャッチ画像のサイズが指定できるんだ。
1200が横幅、800が縦幅ってことだね。
大きい画像をアップロードした場合、元の画像の縦横比を維持したまま1200×800の大きさにリサイズしてくれるんだ。
アイキャッチ画像を出力しよう
投稿を表示する画面でアイキャッチ画像を出すには?
single.phpをいじるんだぜ!single.phpを開いて、以下のように追記しよう。
<?php get_header(); ?>
<main class="main">
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php /* ▼ここから追記箇所 */ ?>
<?php
// アイキャッチがあれば、該当画像を出力。なければ、未設定時の画像を出力。
if( has_post_thumbnail() ){
the_post_thumbnail();
} else {
echo '<img src="' . esc_url( get_theme_file_uri( "未設定時の画像url")) . '">';
}
?>
<?php /* 追記ここまで▲ */ ?>
<div class="wysiwyg-editor">
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
アイキャッチ未設定時に表示される画像URLは、自分で決めてね。
おお~アイキャッチが設定されてなかったことも考慮されてるんだね!
そう、それが男の優しさってやつだ。
うん、そっか~!
ウィジェット機能を追加しよう
ウィジェットって何なの?
ウィジェットっていうのは、あらかじめWordPress側で用意された様々なサイトパーツを管理画面で手軽に配置することができる機能だぜ!
言葉で言われてもしっくりこないから、早く見せてよ!
まぁまぁ、焦んなや。
オリジナルのテーマだと、初期時点でウィジット機能は有効化されてないから、まずはfunctions.phpをイジイジしていこー!
ウィジェットエリアを登録しよう
まず、ウィジェットを利用するために、テーマ内のfunctions.phpファイルで機能を有効化します。
functions.phpの終わりに、次の関数を追加してください。
function custom_widget_register(){
register_sidebar( array(
"name" => "サイドバーウィジェットエリア",
"id" =>"sidebar-widget",
"description" => "ブログページのサイドバーに表示",
"after_widget" => "</div>",
"before_title" => '<h2 class="c-widget_title">',
"after_title" => "</h2>",
));
}
add_action( "widgets_init","custom_widget_register" );
上記を追記すると、何がどうなるの?
管理画面の「外観」をクリックしてみな。
「ウィジェット」っていうのが追加されたっしょ?
おお!ほんまや!
で、ウィジェットをクリックすると、以下みたいにウィジェット設定画面が出るのね。
「利用できるウィジェット」から好きなパーツをクリックして「ウィジェットを追加」をクリックするか、ドラッグアンドドロップをすることで、「サイドバーウィジェットエリア」に色んなパーツを挿入できるぜ!
作成したウィジェットを出力しよう
functions.phpでウィジェットを定義しただけでは、ページ上にウィジェットは表示されません。
index.phpの中で、ウィジェットを表示させたい箇所に以下のコードを記述しましょう。
<?php dynamic_sidebar( "sidebar-widget" ); ?>
おお、ウィジェットが表示できたー!
HTMLがわからない人にとって、ウィジェット機能があるとありがたいよね!
カスタムメニューを追加しよう
まぁた新しい言葉…もう脳みそから血が出そう。
何なの?カスタムメニューって。
カスタムメニューっていうのは、「管理画面から設定できるナビゲーション」のことだね!
例えば、ヘッダーナビのリンク一覧あるじゃない?
Web食いだと以下部分のことね。
このナビゲーションを管理画面で編集できたら楽でしょ?
htmlを編集せずに、管理画面から設定できるようにするってこと?
そうだぜ!これもfunctions.phpに追記するだけで設定可能になるから、もうひと踏ん張り、いってみよう!
functions.phpファイルでテーマの位置を登録
まずは、カスタムメニュー機能を有効化します。
custom_theme_setup関数の中に、以下のコードを追記しましょう。
function custom_theme_setup() {
/* 以下3行を追記 */
register_nav_menus(
array( "global-nav" => "グローバルナビゲーション")
);
}
add_action("after_setup_theme","custom_theme_setup");
上記追記が終わったら、管理画面メニューから「外観」>「メニュー」にアクセスしよう!
アクセスしたら、以下の流れでメニューを作成だ!
次は、メニューに掲載するリンクを設定しよう!
なるほど、慣れちゃえば、管理画面でメニューリンクを簡単に設定できるんだね!
そう、メニューが変わる度にHTMLを編集するのはしんどいからね!
表側でカスタムメニューを出力しよう
さあ、管理画面での設定が終わった!後は出力するだけだぜ!
index.phpの中でカスタムメニューを表示させたい箇所に、テンプレートタグを記述してみよう!
<?php
wp_nav_menu(
array(
"theme_location" => "global-nav",
"container" => "div",
"container_class" =>"c-global-nav"
)
);
?>
私のグローバルナビゲーションのHTMLは以下のような形になってるんだけど、ここに適用するにはどうしたらいいの?
<header class="header">
<nav class="global-nav">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">よくあるご質問</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
こんな感じだね▼
<header class="header">
<nav class="global-nav">
<?php
wp_nav_menu(
array(
"theme_location" => "global-nav",
"container" => "div",
"container_class" =>"c-global-nav"
)
);
?>
</nav>
</header>
<ul>~</ul>が丸ごと入れ替わる形なんだね。。。!
そうそう。wp_nav_menu()は、<ul>タグを出力してくれるからね!
おお!表側で表示されたー!レイアウト崩れてるけど。。。
まぁ、表示はできてるから、とりあえずは成功だぜ!
1点注意は、theme_locationだね。上記例で記入している「global-nav」は、functions.phpで指定したものと同じものを記入する必要があるぜ!
arrayの中で、以下のような設定ができるから、必要な時は追加してみてくれっ!
theme_location | テーマの位置をスラッグで指定。 |
---|---|
container | メニューを囲むタグを指定。 |
container_class | コンテナタグに適用されるclass名。 |
container_id | コンテナタグに適用されるid名。 |
menu_class | メニューを構成するul要素に適用されるclass名。 |
menu_id | メニューを構成するul要素に適用されるid名 |
wp_nav_menuで出力されるHTMLを見てみると、<div>で囲まれちゃってるんだよね…
これを消すことってできるの?
“container” => “div”の部分を変更すればいいのさ!
divを消したければ、”container” => falseとすればOKよ!
<?php
wp_nav_menu(
array(
"theme_location" => "global-nav",
"container" => false
)
);
?>
複数のカスタムメニューを採用するには?
ナビゲーションって、ヘッダーとかフッターとか色々使われるシーンが多いと思うけど、複数箇所に採用したい時はどうすればいいの?
functions.phpで記述した、register_nav_menusを少しテコ入れすればOKさ!
BEFORE
register_nav_menus(
array(
"global-nav" => "グローバルナビゲーション"
)
);
AFTER
register_nav_menus(
array(
"global-nav" => "グローバルナビゲーション",
"footer-nav" => "フッターナビゲーション",
"side-nav" => "サイドナビゲーション"
)
);
追加したのは、「3行目の末尾にあるカンマと、4~5行目部分」だぜ!
末尾のカンマを入力し忘れてしまうことが多いので注意!書き方ミスるとエラーになっちゃうからね!
「footer-nav」とか「フッターナビゲーション」の部分は、任意の文字を入れられるから、自分が採用したい文字を設定しておこう!
じゃあ、これをフッターのナビゲーションに採用するには、どうしたらいいの?
これもグローバルナビゲーションと同様のイメージさ!
以下のBEFORE、AFTERでイメージをつかんでみてくれ~
BEFORE
<footer class="footer">
<nav class="footer-nav">
<ul class="nav-first">
<li><a href="/">ホーム</a></li>
<li><a href="#">僕と君だけの秘密の花園</a></li>
<li><a href="#">新しい世界は君とふたりで</a></li>
</ul>
</nav>
</footer>
AFTER
<footer class="footer">
<nav class="footer-nav">
<?php
wp_nav_menu(
array(
"theme_location" => "footer-nav",
"container" => false,
"menu_class" => 'nav-first',
)
);
?>
</nav>
</footer>
オリジナルテーマ完成
おつかれ~!
ここまでくれば、オリジナルテーマをざっくり反映できるぐらいのレベルにはなってるんじゃないかな?
うん、混乱しすぎて頭ブルってるけどね。
繰り返し作っていくと、少しずつ理解できるようになるから、まずは経験を積んでいくことが大事だね!
1回作っただけだと、ちんぷんかんぷんだろうから、どんどん新規でWordPressサイトを作っていこう!
次回記事では、下層ページへの反映方法を伝えていくぜ!
要チェック!
【転職エージェントをご存知ですか?】 WordPressでオリジナルテーマを作れれば、転職成功率はかなり高いです。 とはいえ、給料・休み・リモートが多いなど、できるだけ条件の良い求人に応募したいですよね? 転職エージェントなら、一般には出回らない好条件の非公開求人を無料で紹介してくれます。 人生のターニングポイントなので、上質なチャンスを見逃すのはもったいないです。 完全無料なので、気になった方は以下記事でメリットだけでもチェックしておくのがおすすめですよ〜。 |