はてブ今回は、WordPressのテーマを自作する方法を解説していきます。WordPressテーマを自作できるようになれば、欲しい機能を搭載できますし、必要最低限の機能だけを実装して無駄のないサイトを作ることができます。まとめ前提となる知識PHPの基礎的な知識HTML、CSSの知識できればJavaScriptの知識WordPressの操作このような知識がある人なら、WordPressのテーマを自作できるでしょう。PHPに関しては、そこまで高いレベルは要求されません。どちらかといえばWordPress特有の挙動や関数を学ぶ必要があります。知っておくべき基本的な関数は、この記事で紹介していきます。必要なファイルstyle.cssindex.phpfunctions.phpheader.phpfooter.phpsidebar.php404.phparchive.phpsingle.phppage.phpsearch.php最低限、style.cssとfunctions.php、index.phpだけでも作ることができますが、一般的なブログサイトを作るとなれば上のようなファイルは必要になります。加えて、部品となるファイルも用意します。searchform.php(検索ボックス用のテンプレート)comments.php(コメント欄用のテンプレート)ブログサイトで必要になるページは以下になります。トップページ(index.php、home.php、front-page.php)記事ページ(single.php)固定ページ(page.php)月別ページ(archive.php)カテゴリーページ(category.php、archive.php)タグページ(tag.php、archive.php)404ページ(404.php)検索結果ページ(search.php)この記事では、それぞれのページの作り方を解説します。テーマ制作の準備テーマを制作する前にいくつか準備が必要になります。ローカル環境にWordPressをインストール当然ですが、WordPressの開発をするためにはローカルにサーバーやデータベースをインストールしておく必要があります。私はXAMPPやMAMPPを入れて開発をしています。ローカル開発環境が整ったら、htdocsファイルにディレクトリを作成して、その中にWordPressをインストールして下さい。ダミー記事をインポートしておく記事が全くない状態でテーマを作るのは難しいと思います。downloads」と書かれた緑色のリンクからエクスポートファイルをダウンロードして下さい。https://github.com/jawordpressorg/theme-test-data-jaダウンロードしたフォルダの中に、ダミー記事用のxmlファイルがあるので、これをインポートして下さい。ダミー記事があると、テーマの作成が楽になります。false);この記述のfalseをtrueにすると、エラーの詳細が表示されるようになります。true);エラーになった時に原因を調べるためには、テスト環境ではこれをtrueにしてデバッグモードにしておきましょう。本番環境ではfalseにして下さい。Patch」プラグインをインストールして下さい。抜粋などで文字数を指定して出力する時など、必要になるからです。出来上がるテーマこの記事では簡単なテーマを作っていきます。仕上がりとしては、こんな感じです。細かいCSSは解説を省きます。CSSはできる前提で進めていきます。style.cssstyle.cssには、テーマの情報を先頭に記述します。http://www.gnu.org/licenses/gpl-2.0.html*/基本的な部分はこんな感じです。WordPressのライセンスはGPLにする決まりがあるので、GPLライセンスにしておきましょう。この記事では、全体的なCSSの説明は省きます。注意が必要な部分については後ほど解説します。functions.phpテーマの設定や機能の追加などは、functions.phpというファイルで行います。記述して、その下に書いていきます。閉じタグは記述しないで大丈夫です。ミスを防ぐために、記述しないのが一般的ですね。この記事では度々functions.phpが出てきますので、その都度説明していきます。head要素やヘッダーの作り方head要素や全ページ共通のヘッダーは、header.phpというファイルで作成します。</header>他にもOGPやTwitterのシェア用コードを入れる必要もありますが、基本的にはこのような形になります。wp_head();この関数は、WordPressを使う上で必要な情報が自動で出力するために必ず入れます。title要素やCSSの読み込みなどは、functions.phpを使ってここに出力させます。titleを出力するtitleはwp_head()の場所に自動で出力されますが、functions.phpで表示方法を指定することができます。functions.phpには以下のように記述します。);こうすることで、タイトルの出力内容を好きなように変更できます。);このコードは、wp_head()でタイトルを出力するための記述です。関数名には接頭辞をつける上記のfunctions.phpの関数名には「my_」という接頭辞が付いています。これは、プラグインなどの関数名と被らないようにするためです。厳密に言うと「my_」も被る可能性があるので、他の人が使わないようなユニークな接頭辞をつけて下さい。CSSファイルを読み込むheadでCSSファイルを読み込む際、header.phpで直に読み込ませるのではなく、functions.phpで設定をします。理由は、CSSの読み込む順番を変えたり、読み込みをキャンセルしたりのカスタマイズができるようにするためです。位置にCSSの読み込みが出力されます。バージョンを出力しているのは、アップデートの際に古いCSSのキャッシュを無効化するためです。グローバルナビを出力するお次はグローバルナビが表示されるようにコーディングしていきます。グローバルナビは、管理画面から設定ができるように記述します。functions.phpに以下のように記述します。);次に、header.phpに出力されるように記述します。今回は、サイト名と一緒に以下のようにしました。全ページ共通のフッターは、footer.phpというファイルで作成します。?></body></html>上記コードにある、wp_footer();という関数は、必要なHTMLタグを自動で出力してくれます。functions.phpを使って、ここにJavaScriptファイルを読み込むコードを出力するように設定します。トップページの作り方トップページは、index.php、home.php、front-page.phpで作ることができます。index.phpは必須のファイルになります。基本的にはトップページはindex.phpで作ります。home.phpで作っても大丈夫です。front-page.phpにすると、固定ページをトップページにすることができないので、一般的にはindex.phpかhome.phpが使われます。今回はindex.phpをトップページとして使います。<p>記事がまだありません。?>have_posts関数で投稿が存在するか判定をします。)でループを開始します。the_post()で次の投稿のデータを取得してきます。次の投稿がなければ、have_posts()がfalseとなり、ループが終了するという流れになります。抜粋のカスタマイズthe_excerpt()関数は、抜粋(記事の概要)を出力するための関数です。抜粋文入力欄に記入してあればそれを、抜粋を入力していない場合は投稿内容の最初の110文字(デフォルト)の単語までを表示します。Patch」プラグインを入れて下さい。抜粋の項目に記述をするとそれが表示されます。この項目に記述がない場合に、投稿内容の最初の110文字(デフォルト)までが表示されます。110文字を超えた分に関しては省略され、デフォルトでは末尾に[...]が挿入されます。抜粋の文字数と末尾の文字列を変更するには、functions.phpに以下のような記述をします。);index.phpとhome.phpの違いhome.phpはトップページ専用のファイルで、index.phpは該当するファイルが見つからなかった場合に表示されるファイルになります。カテゴリーページ用のcategory.phpがテーマにない場合、index.phpでカテゴリーページが表示されます。index.phpは汎用性のあるファイルということです。使い回せるコードはテンプレート化する上記では、トップページに記事一覧を表示する方法を紹介しました。カテゴリーページやタグページ、検索結果ページ、アーカイブページでも記事は一覧で表示されますよね。記事を一覧表示するコードはテンプレート化すると使い回せて便利です。entries.phpというファイルを作成して、index.phpのコードを一部移します。?><p>記事がまだありません。?>そして、index.phpを以下のように書き換えます。?>get_template_part()関数を使えば、ファイル名を指定してテンプレートを出力することができます。これでindex.phpはだいぶスッキリしましたね。記事一覧にページネーションを作るこのままだと、記事一覧が1ページしか表示されません。次のページに進めるためのページネーションを表示させます。↑これ記事一覧はentries.phpにまとめているので、そちらを編集します。?><p>記事がまだありません。?>サイドバーの作り方サイドバーはsidebar.phpというファイルで作成します。サイドバーには、新着記事やカテゴリー、タグなどのウィジェットを利用することが多いでしょう。ウィジェットを設定するコードを、functions.phpに記述します。);これで、管理画面でウィジェットを設定することができるようになります。sidebar.phpには、以下のように記述します。?></div>is_active_sidebar関数は、ウィジェットが使用されているか判定します。dynamic_sidebar関数でidを指定して、その場所に管理画面で設定したウィジェットを出力します。サイドバーは、get_sidebar関数を使って出力します。記事ページはsingle.phpを使って作成します。the_post();このコードで投稿のデータを取得します。the_title();はタイトルを出力する関数です。the_content();は本文を出力する関数です。wp_link_pages();は前後の記事を出力する関数です。投稿日・更新日を表示させる記事ページには投稿日と更新日を表示させるのが一般的ですね。single.phpに以下のように追記します。-->get_the_date()関数はフォーマットを指定して投稿日を取得する関数です。get_the_modified_date()関数はフォーマットを指定して最終更新日を取得する関数です。最終更新日と投稿日が同じ場合は、投稿日のみを出力し、投稿日以降に記事が更新されていたら両方を表示させるように分岐しています。アイキャッチ画像を表示する以下の画像のように、アイキャッチ画像を表示してみましょう。functions.phpでアイキャッチ画像をサポートするように記述を行います。);こうすると、記事作成画面に「アイキャッチ画像」という項目が出現します。ここでアイキャッチ画像を設定することができます。お次はsingle.phpを編集して、画像が表示されるようにします。?></header>has_post_thumbnail()この関数は、投稿にアイキャッチが設定されていればtrueを、なければfalseを返します。get_the_post_thumbnail_url()この関数は、第一引数に記事IDを、第二引数に画像のサイズを指定して、記事に設定されたアイキャッチ画像のURLを取得します。今回は、fullというサイズを使用しています。WordPressで画像をアップすると、自動で(オリジナルサイズを含めて)4つのサイズが生成されます。・・・アップロードした画像の元サイズfunctions.phpで、これ以外のサイズを自動生成することもできます。固定ページとは、例えば「運営者について」とか「問い合わせ」「プライバシポリシー」など、投稿記事とは異なる目的で利用されます。固定ページはpage.phpというファイルで作成します。基本的にはsingle.phpとほとんど一緒なので、コピペしてきます。記事ページと違って、固定ページは投稿日や更新日は表示させないのが一般的なので、削除します。月別ページ、カテゴリーページ、タグページを作る月別ページ、カテゴリーページ、タグページはアーカイブページとしてarchive.phpでまとめて作ることができます。index.phpと作りは同じなので、コピペしてきます。?>記事一覧に、以下の画像のようにタイトルが出力されるようにentries.phpを編集します。?><p>記事がまだありません。?>is_archive()関数は、月別ページ、カテゴリーページ、タグページの場合trueを返します。the_archive_title()関数は、自動でタイトルを出力してくれます。検索結果ページお次は検索結果を表示するページを作成します。検索結果ページは、search.phpで作ります。中身はarchive.phpと同じで大丈夫で、entries.phpを少し編集します。?>entries.phpのタイトル周りを編集します。-->the_search_query()この関数で、検索された文字列を表示させます。$wp_query->found_postsこの部分はヒットした記事の件数を表示させています。$wp_queryはグローバル変数で、この中にページの情報が色々格納されています。var_dumpでどんな情報が格納されているか試しに見てみるといいでしょう。これで、検索結果ページのタイトルが以下のように表示されます。記事が見つからなかった時の文言をちょっと変更します。?><p>記事が見つかりませんでした。?><p>記事がまだありません。?>404ページリクエストされたURLで記事が見つからなかった場合、404ページを表示させましょう。404ページは404.phpで作成します。<p>記事が見つかりませんでした。<p>記事は削除されたか、URLが変更になった可能性があります。?>この404ページは以下のように表示されます。検索フォームを表示させて、サイトを離脱されないようにするのがおすすめです。get_search_form()この関数で検索フォームを出力することができます。コメント欄の表示コメント欄は、comments.phpというファイルを作成します。?></div>wp_list_comments()この関数で記事についたコメントを表示させます。引数で細かい設定を行うことができます。今回は、アバターが表示されるように設定しました。comment_form()この関数はコメント入力欄を表示させる関数です。引数に配列を入れて設定を行います。次は、single.phpにコードを追加して、コメント欄が表示されるようにします。-->comments_template()この関数で、先ほど作成したcomments.phpの中身が出力されます。コメント欄の設定は、管理画面の「設定」→「ディスカッション」から設定を行うことができます。チェック事項テーマ作成がある程度できたら、トップページ記事ページ固定ページアーカイブページカテゴリーページタグページ404ページ検索結果ページ上記ページがちゃんと表示されるか確認しましょう。使用が想定されるウィジェットについては一通り設定してみて、綺麗に表示されるようにCSSを整えましょう。7(コンタクトフォームを生成するプラグイン)」のようなプラグインを使うことが想定される場合は、それらのCSSも整えるようにしましょう。Cacheのようなシェア数がカウントできるプラグインが利用できるようにするのもおすすめです。まとめまずは大枠の部分から作っていき、少しずつ機能を細かい追加していきましょう。最初は難しいかと思いますが、慣れてくれるとそこまで難しいものではないです。不特定多数の人に使用されるのでなければ、自分で使用する最小限の機能だけで済みますからね。この記事を参考に、WordPressのテーマを自作してみて下さい。他にもこんな記事があります。コメントをキャンセルお気軽にコメントしてください!!コメント名前・メールの入力は任意です。名前メールアドレスサイト関連記事WING(Affinger5)で不要なWEBフォントを読み込ませないようにする方法WordPressテーマのSTORK(ストーク)を使ってみた感想、メリット・デメリット【必須&便利】おすすめのWordPressプラグインWING(Affinger5)でスライドショーのCSSとJavaScriptを削除する方法SEOに強いおすすめ日本語WordPressのテンプレートテーマ(無料版と有料版)Search運営者情報SHIROMAブログ運営で独立し、現在は会社を経営しています。WEBデザインやWordPressテーマの制作なども行っています。