今回はWordPress(ワードプレス)でオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明していきます。
■今回WordPress化する静的サイトの例
ここでは、まずワードプレスの基本のおさらいをしてから、前半に最小構成のテーマの作り方を説明、後半に投稿・固定ページなどの各種テンプレートの追加の仕方を説明していきます。
もくじ
【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPressとは 基本のおさらい
WordPressとは
はじめに、ワードプレスの仕組みについて簡単に説明します。もともとWordPress(ワードプレス)は、2003年にブログを作成するシステムとして登場しました。
その後、徐々に進化・発展していき、今ではブログ以外にも企業のホームページ・ウェブサイトとして多く利用されています。
そして、現在ではホームページ作成するためのシステム(CMS)のなかでは世界・日本共にNo1の非常に有名なシステムとなりました。
2015年時点 日本のワードプレスシェア
その特徴として、豊富なテーマ（デザインテンプレート）やプラグイン（スマホのアプリのようなもの）があり、オリジナルのデザインで会員サイトやネットショップなどを作ることも可能です。
WordPress テーマ 追加画面
ワードプレス プラグイン追加画面
また、ワードプレス自体は無料で誰でも利用でき商用利用も可能ですので、勉強すればだれでもワードプレスでホームページを作ることができます。
合わせて読みたい記事
WordPressの基本的な使い方を勉強・おさらいしたい方は「【2019年版WordPress(ワードプレス)の使い方総まとめ】」をあわせてご覧ください。
WordPressの概要構成
以下はワードプレスの構成、いわゆるシステムの実体の概要図です。
通常のホームページの場合は、HTMLファイルや画像ファイルなどのファイル類で構成されますが、WordPressはこれらのフォルダ・ファイル類に加えて、PHPというプログラム言語とMySQLと言われるデータベース（データの蓄積される場所）を利用しています。
実はブログ情報(文章)などもデータベースに蓄積されていて、このデーターベースとHTML・CSS・PHPなどのファイル類と連携して、ワードプレスのシステムを提供しています。
WordPressのフォルダ・ディレクトリ構成
つぎに、WordPressのフォルダ・ディレクトリ構成（下図の赤枠の部分）について説明していきます。
以下はワードプレスのインストールフォルダの中身です。
たくさんありますので、ここではピックアップして説明していきます。
| フォルダ・ファイル名 | 内容 |
|---|---|
| wp-content | ワードプレスのテーマやプラグイン、画像データなどが入ったフォルダ。ワードプレスをカスタマイズする際には、主にこのフォルダの中のファイル類に対して作業していきます。 |
| wp-admin | ワードプレスの管理画面用のファイル類が格納されているフォルダ |
| wp-includes | ワードプレスのシステム全般に関するファイル類が格納されているフォルダ。 |
| wp-config.php | ワードプレスの設定ファイル。データベースとの通信に必要な情報なども記述されており、とても重要なファイル |
| wp-login.php | ワードプレスのログイン画面に関するファイル |
| wp-load.php | ワードプレスの動作に必要なプログラム類を読み込むファイル |
| index.php | サイトにアクセスがあった時に最初に読み込まれるファイル |
wp-contentは、ワードプレスのテーマやプラグイン、画像データなどが入ったフォルダです。ワードプレスをカスタマイズする際には主にこのフォルダの中のファイル類に対して作業していきます。
下記はwp-contentの中身です。この中の「themes」にワードプレスのテーマが格納されています。
「themes」フォルダの中です。デフォルトのワードプレステーマがあるほか、このフォルダに独自テーマを追加することでそのテーマを利用できるようになります。
下記は管理画面の外観＞テーマから見たワードプレスのテーマ画面です。themesフォルダの中にあるテーマがここに表示されて選択することができます。
ワードプレス テーマ選択画面
WordPressの最小構成テーマを作成する
必要最小の構成
ワードプレステーマの最小構成は「index.php」と「style.css」の２ファイルになります。
今回は、themesフォルダの中にテーマフォルダ「webst8」を作成して、index.phpとstyle.cssを作ってワードプレスのテーマを表示させる最小構成で説明していきます。
今回説明する最小構成
- webst8：themesに格納するテーマフォルダ名
- index.php：テーマの基本テンプレート
- style.css：テーマの名前などを記述する
事前に用意する環境
今回は、下記のような環境を例に説明を進めていきます。
ワードプレスが動作するローカル環境
ローカル環境のMAMP上にワードプレスをインストールした状態で進めていきます。
環境は以下の通りです。
■ワードプレスインストールディレクトリ
http://localhost/wpkm
(MAMPのhtdocsにwpkmフォルダを作成してインストール)
■ワードプレスバージョン
4.9.1
合わせて読みたい記事
ローカル開発環境MAMPの導入からWordPressのインストールまでの手順は「【ローカル開発環境】MAMPでWordPressをインストールする方法」を合わせてご覧ください。
事前に準備する静的HTMLページ
ここでは、事前に下記のようなページと、HTML・CSS・画像ファイル準備して説明していきます。
■サンプルウェブページ(index.html)
■事前準備するHTMLフォルダとファイル類
| 項目 | 内容 |
|---|---|
| webst8 | htmlファイル類を格納しているフォルダ。あとでワードプレスのthemesフォルダに移動します。 |
| index.html | 今回ワードプレス化するウェブページ |
| mystyle.css | index.htmlを整形するスタイルシート |
| images | 画像を格納しているフォルダ |
■index.htmlのソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ウェブストエイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="mystyle.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <header> <nav class="navbar navbar-default" style="margin-bottom:0;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <span class="sr-only">メニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="bs-navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">HOME</a></li> <li><a href="#">PROFILE</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </nav> <div id="top-vg"> <img src="images/top.jpeg" alt="トップページ画像" > </div> </header> <section id="content"> <div id="content-wrap" class="container"> <div id="main" class="col-md-9"> <h1 class="text-center">個人事業主向けWebスクール ウェブストエイト</h1> <p> ウェブストエイトは自分でホームページ制作・Web集客したい方向けの 少人数制個別指導のスクール・塾です。 <br><br> 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。 </p> <div class="row"> <div class="col-md-6"> <p><img src="images/pc-wood.jpg" alt="6ヶ月コース画像"></p> <h2 class="text-center">しっかり6ヶ月コース</h2> <p>ホームページ作成からWeb集客まで一通り習得して売上拡大したい方向けのコース</p> </div> <div class="col-md-6"> <p><img src="images/pc-leaf.jpg" alt="1ヶ月コース画像"></p> <h2 class="text-center">お試し1ヶ月コース</h2> <p>特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコース</p> </div> </div> <p class="text-center"> <br> お申し込みは<a href="https://webst8.com">こちらから</a> <br><br> </p> </div> <div id="sidebar" class="col-md-3"> <h1 class="text-center">セミナー情報</h1> <section id="wordpress-seminar"> <h2>WordPress入門セミナー</h2> <p> <img src="images/seminar-wordpress.png" alt="ワードプレスセミナー画像"> </p> </section> <section id="seo-seminar"> <h2>SEO入門セミナー</h2> <p> <img src="images/seminar-seo.png" alt="SEOセミナー画像"> </p> </section> </div> </div> </section> <footer> <div class="container"> <p class="text-center">Copyright © Webst8 All Rights Reserved.</p> </div> </footer> </body> </html> |
■mystyle.cssのソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@charset "UTF-8"; body{ font-size: 16px; } h1{ font-size:28px; font-weight: bold;} h2{ font-size:20px;} h3{ font-size:18px;} img{ max-width:100%; } #content{ background:url(images/pattern-diamond.png); padding-top:20px; padding-bottom:20px; } #content-wrap{ background-color: white; box-shadow: 2px 2px 2px rgba(0,0,0,.3); } #sidebar{ text-align: center;} footer{ background-color: #222; } footer p{ padding:15px 0; color: white; } |
(※)画像をはじめHTMLファイルなどは各自ご自身の好きなものを準備して読み替えて進めてみてください。
上記のデモサイトはこちら
まずは、事前準備した上記の「webst8」フォルダをワードプレスthemesフォルダにコピーしましょう。
style.cssの作成
つづいてwebst8フォルダのなかに、必須ファイルであるstyle.cssを新規作成します。
style.cssにはテーマの名前など必須の情報を入力します。ここではstyle.cssに以下のように記載します。
|
1 2 3 |
/* Theme Name:ウェブストエイト */ |
Theme Nameはワードプレスのテーマの名前(必須)です。他にも必要に応じて下記のような項目などを記載することができます。
| 項目 | 名称 |
|---|---|
| Theme Name : | テーマの名前(必須) |
| Theme URL : | テーマのURL |
| Description : | テーマの説明 |
| Author: | テーマ制作者の名前 |
| Version : | テーマのバージョン |
index.phpの作成
つぎにindex.phpを作成します。
ここでは、トップページとして用意していたindex.htmlのファイル名を「index.php」に変更します。
テーマの適用
これでテーマが適用できるようになります。
ワードプレスの外観＞テーマで「webst8」を有効化します。
補足 テーマのサムネイルを表示する
880x660pxの「screenshot.png」という画像をwebst8フォルダに格納すると、テーマ選択画面でサムネイルが表示できます。
テーマ選択画面でサムネイルが表示された。
テーマ適用後に、トップページを表示します。設定したテーマが表示されていればいったん完了です。
(※)この状態ではまだCSSファイルのスタイルが適用されていなかったり、画像が表示されいないので、さらに修正していきます。
相対パスをワードプレス独自の関数に修正
さきほど、ワードプレスの最小構成のテーマを作成することができましたが、CSSファイルが適用されていなかったり、画像が表示されなくなっていました。
■トップページ スタイルが崩れていて、画像が表示されていない
本来画像がある場所は「ワードプレスインストールフォルダ(ここではlocalhost/wpkm)/wp-content/themes/webst8/images/xxx.jpg」なのですが、下記のように「localhost/wpkm/webst8/images/xxx.jpg」となっていてファイルが見つからず画像が表示されなくなっています。
そこで、相対パスで記述している箇所は設定をワードプレス独自の関数を入れて修正していきます。(CDNを利用している場合など、絶対パスで指定している箇所は修正不要です。)
ここでは下記のようにCSSの設定を変更してください。
CSSファイルの相対パスの修正
|
1 2 3 4 5 |
■修正前 <link rel="stylesheet" href="mystyles.css"> ■修正後 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css"> |
javascriptなども相対パスで設定している場合は、必要に応じて上記の方式で変更してあげましょう。
画像ファイルのパスの修正
また、画像ファイルのパスも以下のように修正します。
画像が多い場合はエディタ上で「command＋F」（ウインドウズの場合は、cntl＋F」を押して下記のように入力して一括置換すると手間が削減できます。
|
1 2 3 4 5 |
■修正前 <img src="images/top.jpeg" alt="トップページ画像"> ■修正後 <img src="<?php echo get_template_directory_uri(); ?>/images/top.jpeg" alt="トップページ画像"> |
設定変更後にCSSファイルや画像が適用されているか、画面が更新されていることを確認します。
「get_template_directory_uri();」について
get_template_directory_uri()は、現在利用しているテーマ(親テーマ)のパスを戻り値として返すワードプレス独自の関数です。
HTMLとして出力する場合は「<?php echo get_template_directory_uri(); ?>」のように記述します。
本例では、get_template-directory_uri()が、http://localhost/wpkm/wp-content/themes/webst8を出力しています。
■参考サイト
関数リファレンス/get template directory uri
つぎにワードプレスで実質必須の関数であるwp_head()とwp_footer()を追加します。
下記のように<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
... <?php wp_head(); ?> </head> <body> ... <?php wp_footer(); ?> </body> </html> |
上記設定後にログインしてトップページを表示すると、画面上部に管理バーが表示されるようになっています。
トップページのソースコードを確認するとワードプレスのオリジナルのコードやプラグインのコードがheadタグの直前に出力されていることを確認できます。
<?php wp_head(); ?>と<?php wp_footer(); ?>は必須の関数
<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入することで、それぞれの関数を経由してワードプレスの基本機能やプラグイン機能のコードが出力されて使うことができるようになります。
これらの基本機能やプラグインを使わない運用は通常ありえないので必須の関数として忘れずに挿入しておきましょう。
(補足)jqueryのワードプレス独自の使い方について
ワードプレスでjQueryを使う場合において、少し通常と異なった使い方をするため補足します。
現状では、下記のように<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>と記述してjqueryを読み込む設定をしています。
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html lang="ja"> <head> .... <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ... </head> |
しかし、ワードプレスにはもともと標準でjQueryを読み込んでいるため競合してしまう場合があります。重複読み込みしても一見問題なく動くケースもありますが、予期せぬ不具合やパフォーマンス劣化を起こす場合があります。
(※)ワードプレス標準で読み込まれるjqueryファイルの場所
<ワードプレスインストールフォルダ>/wp-includes/js/jquery/jquery.js
異なる二つのjQueryファイルを読み込んで競合するのを防ぐため、一般的にはもともとワードプレスに備わっているjQueryを利用します。
ワードプレスではwp_enqueue_script関数が用意されていて、これを使って読み込みの順番の制御を行うことができます。
今回はindex.phpのwp_head()の前の行に、<?php wp_enqueue_script('jquery'); ?>を追加します。
代わりに、<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>が不要になったのでこの一行をコメントアウト(または削除)しておきます。
■修正ステップ1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ウェブストエイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css"> <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> --> <?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> </head> ... |
(新たにfunctions.phpというファイルを作ってそこに記述して制御する方法もありますが、簡略化のためここでは割愛します。)
上記の設定後にトップページのソースコードを見るともともとワードプレスに備わっているjqueryが読み込まれるようになったことが確認できます。
また、bootstrap用のjavascriptファイル「<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>」はjqueryを利用しているため、jqueryを読み込んだ後で読み込ませる必要があります。
そこで、<?php wp_enqueue_script('jquery'); ?>の後の行に下記のコードを追加します。
|
1 |
<?php wp_enqueue_script('bootstrap-js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',array('jquery')); ?> |
(上記のざっくりの意味は、’bootstrap-js’というハンドル名(わかりやすくて一意な名称であればなんでも良い)をつけて、’https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js’のファイルを’jquery’の後に読み込ませるという意味です。
■詳細の説明はこちらをご覧ください。
関数リファレンス/wp enqueue script | WordPress Codex日本語版
代わりにもとの「<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>」は不要になったため、コメントアウト(または削除)します。
■修正後のindex.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ウェブストエイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css"> <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> --> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> --> <?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('bootstrap-js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',array('jquery')); ?> <?php wp_head(); ?> </head> ... |
上記のようにjqueryを利用する読み込むJavascriptは、jqueryを読み込んだ後に設定するようにしましょう。
ここでは、割愛しますが、他のCSSファイルやJavascriptファイルの読み込み順番も同様にして制御することができます。
■詳細の説明はこちらをご覧ください。
関数リファレンス/wp enqueue script | WordPress Codex日本語版
(補足)通常jQueryで使っている「$」が使えない件
jQueryを利用した書き方で「$」を使った書き方をすることも多いと思いますが、実はこれもそのまま使えません。ワードプレス標準で読み込まれるjqueryファイルは、標準のjQueryとは少し異なっています。
ワードプレスに備わっているjQueryはno-conflictモードになっていて「$」が使えなくなっています。ワードプレスの他のライブラリで「$」の文字が使われいた時に不具合がおきないようにこのような仕様になっています。
従ってネットで探したjQueryのコードをそのままコピー＆ペーストしても「$」が原因で動かないケースがよくあります。簡単にできる対処方法としては「$」を「jQuery」に全て変換する方法があります。
あるいは「$(function(){・・・})」を「jQuery(function($) {・・・})」のようにカプセル化した書き方をしても解決できます。
テンプレートを分割する
つぎに、下記のようにindex.phpをheader.phpとfooter.phpとsidebar.phpに分割していきます。分割することで、ファイルを共通化して効率よくメンテナンス・更新ができるようになります。
まずは、空のheader.phpとfooter.phpとsidebar.phpを新規作成してください。
上記のテンプレートはindex.php側(呼び出し側のファイル)で、以下の関数で呼び出すことができます。
各テンプレートの呼び出し方
- header.phpは「get_header();」で呼び出すことができます。
- footer.phpは「get_footer();」で呼び出すことができます。
- sidebar.phpは「get_sidebar();」で呼び出すことができます。
header.phpの作成
まずはheader.phpを作っていきます。ここではヘッダー画像までを共通化したいので、index.phpの下記の部分を切り取り、header.phpにコピーします。
■header.php (index.phpから切り取ってheader.phpに貼り付けするコード)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ウェブストエイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css"> <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> --> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> --> <?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('bootstrap-js','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',array('jquery')); ?> <?php wp_head(); ?> </head> <body> <header> <nav class="navbar navbar-default" style="margin-bottom:0;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <span class="sr-only">メニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="bs-navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">HOME</a></li> <li><a href="#">PROFILE</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </nav> <div id="top-vg"> <img src="<?php echo get_template_directory_uri(); ?>/images/top.jpeg" alt="トップページ画像" > </div> </header> |
(※)共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
次に、index.php上部(切り取りした部分)に<?php get_header(); ?>を追記して分割したheader.phpを読み込む設定をします。
■index.phpに追記するコード<?php get_header(); ?>
|
1 2 3 4 5 |
<?php get_header(); ?> <!-- 上記が追記するコード --> <section id="content"> ... |
(※)get_header()はワードプレス独自の関数で、header.phpを読み込む処理をしてくれます。
つづけて、footer.phpを作成します。ここでは、<footer>から</html>までを切り取って、footer.phpに貼り付けます。
■footer.php(index.phpから切り取ってfooter.phpに貼り付けするコード)
|
1 2 3 4 5 6 7 8 9 |
<footer> <div class="container"> <p class="text-center">Copyright © Webst8 All Rights Reserved.</p> </div> </footer> <?php wp_footer(); ?> </body> </html> |
(※)共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
次に、index.phpの最終行(切り取りした部分)に<?php get_footer(); ?>を追記して分割したfooter.phpを読み込む設定をします。
■index.phpに追記するコード <?php get_footer(); ?>
|
1 2 3 4 |
... </section> <!-- 下記が追記するコード --> <?php get_footer(); ?> |
(※)get_footer()はワードプレス独自の関数で、footer.phpを読み込む処理をしてくれます。
最後にsidebar.phpを作成します。ここでは、<div id="sidebar" class="col-md-3">タグの中身を切り取って、sidebar.phpに貼り付けます。
■sidebar.php(index.phpから切り取ってsidebar.phpに貼り付けするコード )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1 class="text-center">セミナー情報</h1> <section id="wordpress-seminar"> <h2>WordPress入門セミナー</h2> <p> <img src="<?php echo get_template_directory_uri(); ?>/images/seminar-wordpress.png" alt="ワードプレスセミナー画像"> </p> </section> <section id="seo-seminar"> <h2>SEO入門セミナー</h2> <p> <img src="<?php echo get_template_directory_uri(); ?>/images/seminar-seo.png" alt="SEOセミナー画像"> </p> </section> |
(※)共通化したいところまでをコピーすれば良いので、切り取る部分は必ずしも上記と同じにする必要はありません。
つぎに、index.phpの<div id="sidebar" class="col-md-3">タグの中に(切り取りした部分)に<?php get_sidebar(); ?>を追記して分割したsidebar.phpを読み込む設定をします。
■index.phpに追記するコード <?php get_sidebar(); ?>
|
1 2 3 4 5 6 |
... <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> <!-- 上記が追記するコード --> </div> ... |
(※)get_sidebar()はワードプレス独自の関数で、sidebar.phpを読み込む処理をしてくれます。
最後に表示がうまくいっているかを確認しましょう。トップページを表示してこれまで通り画面が正常に表示されていれば完了です。
他のテンプレートを作成するには
今までは、静的な一つのHTMLファイルをワードプレス化する方法を紹介しましたが、ここではもう少しステップアップして固定ページや投稿ページ、アーカイブページなどを作成する方法も紹介していきます。
ワードプレスでは役割に応じて下記のようなテンプレートファイルを作ることができます（他にもたくさんありますがここでは割愛します）。
主要なテンプレートファイル
ワードプレスでよく利用する主要なテンプレートファイルをいくつかピックアップして記載します。
| テンプレートファイル名 | 概要 |
|---|---|
| index.php | ワードプレス必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。 |
| single.php | 投稿用のテンプレート |
| page.php | 固定ページ用のテンプレート |
| archive.php | アーカイブ用のテンプレート |
| category.php | カテゴリーページのテンプレート |
| 404.php | ページが見つからないエラー(404エラー)用のテンプレート |
| search.php | 検索結果用のテンプレート |
テンプレートの主な優先順位
これらのテンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われます。
初めに作った、index.phpは他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。
ここでは、トップページと固定ページと投稿ページの優先順位について説明していきます。
トップページ用テンプレートの優先順位
トップページ用テンプレートの優先順位です。
| 優先順位 | テンプレートファイル名 | 概要 |
|---|---|---|
| 1 | front-page.php | トップページ用のテンプレート |
| 2 | フロントページに設定した固定ページ.php | 表示設定から、フロントページの表示で指定した固定ページ |
| 3 | home.php | - |
| 4 | index.php | - |
今回紹介している例では、index.php以外のテンプレートが存在しないため、トップページにindex.phpが適用されています。
固定ページの優先順位
固定ページ用テンプレートの優先順位です。
| 優先順位 | テンプレートファイル名 | 備考 |
|---|---|---|
| 1 | カスタムテンプレート | |
| 2 | page-{スラッグ名}.php | |
| 3 | page-{ID}.php | |
| 4 | page.php | |
| 5 | index.php | - |
今回紹介している例では、index.php以外のテンプレートが存在しないため、どの固定ページを表示してもindex.phpが適用されます。
投稿ページの優先順位
投稿ページ用テンプレートの優先順位です。
| 優先順位 | テンプレートファイル名 | 概要 |
|---|---|---|
| 1 | single-{post-type}.php | カスタム投稿タイプ。投稿タイプがnewsの場合はsingle-news.php |
| 2 | single.php | - |
| 3 | index.php | - |
今回紹介している例では、index.php以外のテンプレートが存在しないため、どの投稿ページを表示してもindex.phpが適用されます。
今回は簡単な紹介になりましたが、優先順位の全体像は下記にありますので、ご興味のある方は確認してみてください。
テンプレート階層 | WordPress Codex日本語版
テンプレート階層(画像) | WordPress Codex日本語版
さて、現時点では、index.phpしか表示できるテンプレートがないので、ワードプレスの投稿や固定ページを新規作成してもこの時点ではindex.phpの内容が表示されます。
ここで、index.phpより優先順位の高い固定ページ用のテンプレート「page.php」を作れば、index.phpより優先度が高いので、固定ページではこちらが自動的に使用されます。
以下に、固定ページ(page.php)を作るサンプルを紹介して行きます。
固定ページ(page.php)の作り方
ここでは、固定ページ(page.php)の作り方を説明します。
固定ページのテンプレートが適用される順番は下記のようになっています。page.phpを作成すればindex.phpよりも優先されるのでpage.phpを作成して行きます。
固定ページのテンプレート優先順位
| 優先順位 | テンプレートファイル名 | 備考 |
|---|---|---|
| 1 | カスタムテンプレート | |
| 2 | page-{スラッグ名}.php | |
| 3 | page-{ID}.php | |
| 4 | page.php | |
| 5 | index.php | - |
固定ページ(page.php)の作り方
index.phpを流用して作りたいと思います。index.phpをコピーしてpage.phpにリネームして下さい。
まずはこのpage.phpが固定ページに適用されるかを確認して見ましょう。
ここでは、、<div id="main" class="col-md-9">〜</div>の中を削除して代わりに以下のようにh1タグを追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php get_header(); ?> <!-- 上記が追記するコード --> <section id="content"> <div id="content-wrap" class="container"> <div id="main" class="col-md-9"> <h1>固定ページpage.phpです。</h1> </div> <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> <!-- 上記が追記するコード --> </div> </div> </section> <!-- 下記が追記するコード --> <?php get_footer(); ?> |
この状態で、ワードプレスの管理画面から何か適当な固定ページを作成してみてください。作成後に公開→プレビューを表示してみてください。
先ほど作成したpage.phpのテンプレートが適用されていることがわかります。
上記では管理画面で固定ページに記述したタイトルや本文が反映されていなかったので、管理画面で書いた内容が反映されるようにpage.phpを編集して行きます。
以下はワードプレスの記事の中身を出力する基本構文です。
(h1,sectionタグはこちらで任意に決めたHTMLタグなので、h2タグでもdivを使っても構いません。)
詳しい内容は割愛しますが、ここでは、そのまま固定ページ用のテンプレート「page.php」に以下のように追記すると、固定ページの中身を出力してくれます。
■page.phpのソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php get_header(); ?> <!-- 上記が追記するコード --> <section id="content"> <div id="content-wrap" class="container"> <div id="main" class="col-md-9"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <section> <?php the_content(); ?> </section> <?php endwhile; endif; ?> </div> <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> <!-- 上記が追記するコード --> </div> </div> </section> <!-- 下記が追記するコード --> <?php get_footer(); ?> |
■whileループで利用するワードプレス関数の説明
| 項目 | 内容 | ||
|---|---|---|---|
| whileループ |
WordPressの投稿の中身を表示するために使われるワードプレス用の構文です。
参考：ループ | WordPress Codex 日本語版 |
||
| the_title() | 投稿や固定ページのタイトルを表示します。whileループの中で使用します。 参考：テンプレートタグ the title | WordPress Codex 日本語版 |
||
| the_content() | 投稿や固定ページの本文を出力します。 whileループの中で使用します。 参考：テンプレートタグ the content | WordPress codex 日本語版 |
これで、管理画面で作成した固定ページの内容を出力する準備が整いました。再度、さきほどの固定ページをプレビューして確認してみると、管理画面で記述した内容が表示されていることを確認できます。
このように、HTMLで作成したテンプレートの中にWordPressが用意している関数を組み込むことでワードプレスの機能を利用できるようになります。
ここでは、タイトルと本文を出力していますが、他にも投稿日時やカテゴリーなど色々なものを出力できるので、ご興味のある方は下記を参照してみてください。
■参考サイト
ループ | WordPress Codex 日本語版
スラッグ付き固定ページ(page-{スラッグ名}.php)の作り方
さらに独自のレイアウトの固定ページを作りたい場合は、page-{該当ページのスラッグ名}.phpを作れば、page.phpより優先度が高くなり、こちらが自動的に使われます。
下記のように静的サイトでもともと「contact.html」と「profile.html」がある前提で、これをワードプレスの固定ページとして読み込む方法を説明します。
固定ページを作成する
まず固定ページを作成していきます。
固定ページ＞新規作成より「お問い合わせ」と「プロファイル」作成します。本文は空で構いませんので、ここではスラッグ名をそれぞれ「contact」と「profile」と入力して公開して下さい。
■固定ページ「お問い合わせ」を作成。スラッグを「contact」に変更して公開
■固定ページ「プロファイル」を作成。スラッグを「profile」に変更して公開
ファイル名を変更する
つぎに、テーマフォルダ内のhtmlファイルをリネームします。
ここでは下記のように変更します。
- contact.html → page-contact.php
- profile.html → page-profile.php
以上で完了です。
サイトを確認してページが反映されていることを確認しましょう。
別の固定ページテンプレートを作成する
固定ページは、「page.php」というテンプレートファイルで作成することはすでに解説した通りです。このひとつのテンプレートファイルで事足りればよいのですが、ページによっては、1カラムのテンプレートを利用したい場合など、複数のレイアウトがあった方が便利な場合があります。
ここでは複数のテンプレートファイルを作成・管理する方法について説明します。例題として、1カラムレイアウト（サイドバーがないテンプレート）を作成してみましょう。
■ここで作成するファイル名(名前はなんでも構いません。管理しやすい名前がおすすめです。)は、「pagetemplate-onecolumn.php」にします。元になるテンプレートファイルの「page.php」をコピーして、「pagetemplate-onecolumn.php」を作成します。
ここでは、pagetemplate-onecolumn.phpを下記のように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php /** * Template Name: 1カラムテンプレート * Description: 1カラムレイアウト用のテンプレート */ ?> <?php get_header(); ?> <section id="content"> <div id="content-wrap" class="container"> <div id="main" class="col-md-12"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <section> <?php the_content(); ?> </section> <?php endwhile; endif; ?> </div> </div> </section> <?php get_footer(); ?> |
■上記の解説
- ファイル名の先頭にコメントアウトで、このテンプレートの名前を記述します。テンプレートの名前は「Template Name:」の後に続く形で記述します。また、「Description」の後に、テンプレートファイルの説明文を記載することも可能です。
1234567<?php/*** Template Name: 1カラムテンプレート* Description: 1カラムレイアウト用のテンプレート*/?>... - ワンカラム用のテンプレートにするので、サイドバーの以下セクションを削除します。
123<div id="sidebar" class="col-md-3"><?php get_sidebar(); ?></div> - また、メインカラムのdivのクラスcol-md-9をcol-md-12に変更します。
1<div id="main" class="col-md-10 col-md-offset-1">
これで、1カラムのテンプレートが作成できました。管理画面の固定ページで1カラムテンプレートを選択できるようになったので、タイトルと文章を適当に記述してみましょう。
テンプレートに「1カラムテンプレート」を選択して、公開→プレビューをしてみましょう。
プレビューで1カラムのページができていることがわかります。
以上で、固定ページの別テンプレートの作成方法は完了です。このテンプレートは固定ページの中で最も高い優先順位になります。
投稿(single.php)の作り方
つづいて、投稿を出力する方法を紹介します。
投稿ページのテンプレートが適用される順番は下記のようになっています。single.phpを作成すればindex.phpよりも優先されるので、ここではsingle.phpを作成して行きます。
投稿ページの優先順位
投稿ページのテンプレートの優先順位は下記の通りです。
| 優先順位 | テンプレートファイル名 | 概要 |
|---|---|---|
| 1 | single-{post-type}.php | カスタム投稿タイプ。投稿タイプがnewsの場合はsingle-news.php |
| 2 | single.php | - |
| 3 | index.php | - |
基本的にpage.phpを作成した時と同じ手順で作成することができます。
ここでは、page.phpを流用して作りましょう。page.phpをコピーしてsingle.phpにリネームして下さい。
では、このまま管理画面の投稿から何か記事をかいて公開→プレビューを表示してみて下さい。
投稿に書いた内容が表示されていることがわかります。
ワードプレスの仕様により、先ほどの構文を投稿用テンプレート「single.php」に書くと、ワードプレスが投稿用の中身を探してくれて表示してくれています。
日付別表示(archive.php)の作り方
つづいて、日付別の投稿一覧を表示するテンプレートを作成します。
日付別アーカイブインデックスページの表示に使用されるテンプレートファイルの優先順位は下記の通りです。
archive.phpを作成すればindex.phpよりも優先されるので、ここでは、archive.phpを作成します。
日付別表示のテンプレート優先順位
| 順位 | テンプレートファイル名 | 概要 |
|---|---|---|
| 1 | date.php | - |
| 2 | archive.php | - |
| 3 | index.php | - |
日付別表示ページ(archive.php)の作り方
まずこれまでと同様に、single.phpをコピーしてarchive.phpを作成してください。
つぎに、archive.phpを下記のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php get_header(); ?> <!-- 上記が追記するコード --> <section id="content"> <div id="content-wrap" class="container"> <div id="main" class="col-md-9"> <h1>記事一覧</h1> <hr> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2> <a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a> </h2> <section> <p>作成日時：<?php the_time('Y年n月j日'); ?></p> <a href="<?php echo get_permalink(); ?>"><?php the_excerpt(); ?></a> </section> <hr> <?php endwhile; endif; ?> </div> <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> <!-- 上記が追記するコード --> </div> </div> </section> <!-- 下記が追記するコード --> <?php get_footer(); ?> |
■各関数の意味
| 関数名 | 意味 |
|---|---|
| get_permalink(); | 記事のパーマリンク(URL)を出力する関数。whileループ内で使用します。 |
| the_title(); | 記事タイトルを出力する関数。whileループ内で使用します。 |
| the_excerpt() | 記事本文の抜粋を出力する関数。whileループ内で使用します。 |
| the_time('Y年n月j日'); | 日付を出力する関数。whileループ内で使用します。 |
記事の一覧が表示されます。表示件数はワードプレスの設定で変更することも、独自に設定することもできます。
「ワードプレスインストールドメイン/yyyy(西暦を入れる)」のようにアクセスすると、その年月日の一覧が表示されます。
また、ページネーションをつけて表示件数以上を表示させる方法もありますが、ここでは割愛します。ご興味のある方は調べて見てください。
index.phpに最新記事一覧を表示する
先ほどのarchive.phpのループの中の記述を利用して、index.phpに最新記事一覧を表示してみましょう。
index.phpに下記のように<div id="posts">〜</div>の最新記事一覧のパートを追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php get_header(); ?> <!-- 上記が追記するコード --> <section id="content"> <div id="content-wrap" class="container"> <div id="main" class="col-md-9"> <h1 class="text-center">個人事業主向けWebスクール ウェブストエイト</h1> <p> ウェブストエイトは自分でホームページ制作・Web集客したい方向けの 少人数制個別指導のスクール・塾です。 <br><br> 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。 </p> <div class="row"> <div class="col-md-6"> <p><img src="<?php echo get_template_directory_uri(); ?>/images/pc-wood.jpg" alt="6ヶ月コース画像"></p> <h2 class="text-center">しっかり6ヶ月コース</h2> <p>ホームページ作成からWeb集客まで一通り習得して売上拡大したい方向けのコース</p> </div> <div class="col-md-6"> <p><img src="<?php echo get_template_directory_uri(); ?>/images/pc-leaf.jpg" alt="1ヶ月コース画像"></p> <h2 class="text-center">お試し1ヶ月コース</h2> <p>特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコース</p> </div> </div> <p class="text-center"> <br> お申し込みは<a href="https://webst8.com">こちらから</a> <br><br> </p> <div id="posts"> <h1>記事一覧</h1> <hr> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2> <?php the_time('Y年n月j日'); ?> <a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a> </h2> <hr> <?php endwhile; endif; ?> </div> </div> <div id="sidebar" class="col-md-3"> <?php get_sidebar(); ?> <!-- 上記が追記するコード --> </div> </div> </section> <!-- 下記が追記するコード --> <?php get_footer(); ?> |
トップページを表示して、下記のように最新の記事が表示されていれば完了です。
index.phpに下記のループ文を記述すると、投稿一覧が表示されるようになります。
また、ここでは割愛しますが、ループ文に変更を加えることで、カスタム投稿タイプの一覧も表示することもできます。
カテゴリー用テンプレートの作成
つづいて、投稿のカテゴリー一覧を出力する方法を紹介します。
カテゴリー用の優先順位
カテゴリーアーカイブインデックスページの表示に使用されるテンプレートファイルの優先順位は下記の通りです。
| 順位 | テンプレートファイル名 | 概要 |
|---|---|---|
| 1 | category-{slug}.php | カテゴリーのスラッグが news ならば WordPress は category-news.php を探す。 |
| 2 | category-{id}.php | カテゴリー ID が 6 ならば WordPress は category-6.php を探す。 |
| 3 | category.php | - |
| 4 | archive.php | - |
| 5 | index.php | - |
archive.phpとレイアウトが同じで良い場合は、新たにcategory.phpを作らなくても、archive.phpが適用されるので新規作成する必要はありません。
【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
テーマにfunctions.phpを作成する
functions.phpとは、WordPressサイトの動作を制御したり、機能を追加することができるファイルです。必須ではありませんが、このfunctions.phpにWordPressの動作を制御する関数を記述できて便利なので、通常はfunctions.phpを作成することが多いです。
WordPressでは、Webページを表示する際に、毎回自動でfunctions.phpを読み込んでいます。
それでは、早速テーマフォルダ(ここでは、webst8)の直下にfunctions.phpを新規作成しましょう。
functions.phpには、テーマをサポートするための関数を作成します。ここではわかりやすいように、テーマ名を冠した「webst8_setup」と命名した例で下記のように記述します。
|
1 2 3 4 5 |
<?php function webst8_setup() { //ここに関数の中身を記述します。 } add_action( 'after_setup_theme', 'webst8_setup' ); //after_setup_themeアクションフック※に登録します。 |
WordPressでは、任意の機能をWordPress本体に引っ張り込む (hook into)ための「フック」という機能を提供しており、特定のタイミングで任意の関数を呼び出して作動させることができます。
つまり、「〇〇の動作のタイミングに合わせて、〇〇の関数(機能)を実行させる。」ということができます。
フックには「アクションフック」と「フィルターフック」の2つが用意されています。アクションフックの場合にはadd_action()、フィルターフックの場合にはadd_filter()を呼び出して、特定のフックに作成した関数を登録します。
先ほど説明したfunctions.phpのコードの一部「add_action( "after_setup_theme", "webst8_setup" );」は、after_setup_theme(テーマ初期化のタイミング)にwebst8_setupという関数を実行しなさいという記述になります。
フックについて、説明しようとするとそれだけでとても長くなるのでここでは割愛します。詳しくは「プラグインAPI - WordPress Codex」や「WordPress フック」などで検索して調べてみてください。
functions.phpでアイキャッチ機能を有効化する
では、早速functions.phpを利用してアイキャッチ画像の設定をしてみましょう。
初期状態ではアイキャッチ機能は有効化されておらず、アイキャッチの設定ができない状態になっています。
■functions.php設定前。アイキャッチ画像の設定欄がない
WordPressでアイキャッチ画像を使用するには、functions.phpに、記述する必要があります。下記のように、add_theme_support()関数に引数として、post-thumbnailsを指定します。
|
1 2 3 4 5 6 7 |
<?php function webst8_setup() { //ここに関数の中身を記述します。 add_theme_support( 'post-thumbnails' ); //アイキャッチ画像をON } add_action( 'after_setup_theme', 'webst8_setup' ); //after_setup_themeアクションフック※に登録します。 |
(※)add_theme_support()とは
add_theme_supportは、テーマがパラメータで指定した機能を有効化するようにする関数です。
本例では、add_theme_support( "post-thumbnails" ); でアイキャッチ画像を有効化しています。
ワードプレスの編集画面でアイキャッチが設定できるようになっていればOKです。
■functions.php設定後。アイキャッチ画像の設定欄が表示された
メニューバーを作成する
WordPressの管理画面には自由にメニューを編集できる「ナビゲーションメニュー」という機能が用意されています。外観＞メニューから設定できますが、アイキャッチ画像の設定と同様に、初期状態はOFF状態で表示されていません。
functions.phpに、下記のようにwebst8_setup()関数の中に、add_theme_support( ‘menus’)で、メニュー機能を有効化します。
|
1 2 3 4 5 6 7 8 |
<?php function webst8_setup() { //ここに関数の中身を記述します。 add_theme_support( 'post-thumbnails' ); //アイキャッチ画像をON add_theme_support( 'menus'); //メニュー機能をON } add_action( 'after_setup_theme', 'webst8_setup' ); //最後に作成したafter_setup_themeアクションフック※に登録します。 |
カスタムメニューが有効になると、管理画面の「外観」の中にメニューという項目が表示されるようになります。
早速、外観＞メニューから「main-manu」という名称でメニューを新規作成しましょう。
合わせて読みたい
メニューバーの設定方法についてはこちらをご参照ください。
これでWordPressの管理画面から設定できるようになりましたが、まだ設定した内容が表示されない状態なので、テンプレート側にメニューバーを表示する設定をしていきます。
メニューバーの表示があるのはheader.phpなので、header.phpのグローバルナビゲーションの箇所を修正していきます。下記のようにheader.phpを修正しましょう。
■header.phpのnav要素部分。修正前の状態
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<nav class="navbar navbar-default" style="margin-bottom:0;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <span class="sr-only">メニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="bs-navbar-collapse-1" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">HOME</a></li> <li><a href="#">PROFILE</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </nav> |
<ul class="nav navbar-nav">...</ul>のセクションを削除して、代わりにメニュー用の関数wp_nav_menu()を追記します。
■header.phpのnav要素部分。修正後の状態
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<nav class="navbar navbar-default" style="margin-bottom:0;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> <span class="sr-only">メニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="bs-navbar-collapse-1" class="collapse navbar-collapse"> <?php $args = array( 'menu_class' => 'nav navbar-nav', 'container' => false, ); wp_nav_menu($args); ?> </div> </nav> |
外観＞メニューで設定したメニューが正しく表示されていればOKです。
ソースコードを見ると、wp_nav_menu()がul以下の要素を出力していることがわかります。
$argsで指定している配列は、メニューバーにどんなクラスを付与するかなど、出力の仕方をオプションで指定しています。
|
1 2 3 4 5 6 7 |
<?php $args = array( 'menu_class' => 'nav navbar-nav', 'container' => false, ); wp_nav_menu($args); ?> |
wp_nav_menu()の詳細については「テンプレートタグ/wp_nav_menu - WordPressCodex」をご参考ください。
まとめ
まとめです。
今回はワードプレスでオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明しました。
ワードプレスの基本説明からはじまり、最小構成のテーマの作り方、投稿・固定ページなどの各種テンプレートの追加の仕方を説明していきました。
ワードプレスでテーマを作るためには、どの名前のテンプレートがどんな役割を持っているか・どんな優先順位になっているかや、主要な関数や使い方を覚えたうえで、HTMLに組み込んでいけば作ることができます。
たくさんのテンプレートや関数がありますが、とはいえ必要最低限はindex.phpとstyle.cssですので、まず最小構成から徐々に作り始めていけば良いかと思います。
以下に本記事で紹介したテンプレートと関数を再掲しますのでご参考ください。
■主要なワードプレスのテンプレートメイト役割
| テンプレートファイル名 | 概要 |
|---|---|
| index.php | ワードプレス必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。 |
| single.php | 投稿用のテンプレート |
| page.php | 固定ページ用のテンプレート |
| archive.php | アーカイブ用のテンプレート |
| category.php | カテゴリーページのテンプレート |
| 404.php | ページが見つからないエラー(404エラー)用のテンプレート |
| search.php | 検索結果用のテンプレート |
■ワードプレス独自の関数
| 項目 | 内容 | ||
|---|---|---|---|
| whileループ |
WordPressの投稿の中身を表示するために使われるワードプレス用の構文です。
参考：ループ | WordPress Codex 日本語版 |
||
| the_title() | 投稿や固定ページのタイトルを表示します。whileループの中で使用します。 参考：テンプレートタグ the title | WordPress Codex 日本語版 |
||
| the_content() | 投稿や固定ページの本文を出力します。 whileループの中で使用します。 参考：テンプレートタグ the content | WordPress codex 日本語版 |
||
| get_permalink(); | 記事のパーマリンク(URL)を出力する関数。whileループ内で使用します。 | ||
| the_excerpt() | 記事本文の抜粋を出力する関数。whileループ内で使用します。 | ||
| the_time('Y年n月j日'); | 日付を出力する関数。whileループ内で使用します。 |
これまで紹介した方法は、初学習用にある程度簡略化していますワードプレスの機能をもっと使うためには、いろいろなやり方があるので、より本格的に勉強したい方は本などを購入して勉強してみると良いかと思います。
今回は以上になります。最後までお読みいただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
でオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にワードプレスのテーマの作成方法の基本について説明していきます。 ){kind=link}