前回の「基本的なテーマの構成」の手順を踏まえた上で、次は実際にWebサイト用のテーマを作成します。下図のようなデザインデータを元に、まずは一番使用頻度の高いサブページ(下層ページ)のコーディングから始めます。Contentsコーディングの準備まずはデザインに従ってhtmlの大まかな構造を次のように想定します。ファイルを以下のように作成します。各部の詳細については、次項の「index.phpの詳細」で順を追って説明します。<p>お探しのページは見つかりませんでした。Found</h1><p>お探しのページは見つかりませんでした。?></body></html>style.cssを作成デザインデータに沿ってCSSファイルにスタイルを設定します。内容は以下のように作ってます。同じ階層の「images」フォルダに格納します。}index.phpの詳細<head>〜</head>まずHTML5のDOCTYPE宣言から。〜」を記述しておきます。viewportの設定とセットでスタイルシートには以下の記述も追加しておきます。下記のように記述します。?></title>ブラウザでの出力結果は以下のようになります。wp_title($sep,$display,$seplocation)ページのタイトルを表示します。パラメータの設定値は左から順に「区切り文字」「ページタイトルの表示(true)非表示(false)」「区切り文字の位置(ページタイトルの左右)」です。非推奨になる可能性について続きを表示2015年11月頃の時点で「wp_title()」が非推奨になったという情報が一時期ありました。非推奨は一旦取り下げられたものの、ネット上の情報を探ってみると2016年2月の現時点では、<title>タグは以下の出力方法に置き換えた方が将来的に良いだろうという見解が多いみたいです。<title>タグを自動生成する以下の記述を追加します。ファイルを作成してください。);▼タイトルの区切り文字をデフォルトの「-」から「|」に変更したい場合は、以下の記述を追加します。キャッチフレーズ」となりますので、キャッチフレーズ(description)を取り除きたい場合は以下のように記述します。いじるよりも、単純にテンプレートタグで<head>内に記述する方が後々のメンテナンスもしやすいので、このまま引き続きwp_title()が使えると良いのですけどね〜スタイルシートの設定スタイルシートのリンク先(href)にget_stylesheet_uri()を記述します。media="all">「一般設定」のWordPressアドレスが「http://ex.local/wp」の場合、出力結果は以下のようになります。get_stylesheet_uri()使用中テーマのスタイルシートのURLを取得します。?>/style.css」とした場合も、上記と同じ出力結果を得られますので、テンプレートごとに「style.css」の箇所を変更してデザインを切り替えることも可能です。?>/css/style.css」と記述して下記のように出力することもできます。get_template_directory_uri()使用中テーマのディレクトリのURLを取得します。公式マニュアルwp_head()の追加headの終了タグ</head>の直前にwp_head()を追加します。?></head>wp_head()はWordPressの動作に欠かせない重要なアクションフックを呼び出す関数です。記述が無いとWordPress本体や追加したプラグインが正常に動作しませんので、追加するのを忘れないように特に注意してください。wp_head()WordPress本体やプラグインが動作する上で必要な記述を<head>〜</head>内に追加するためのアクションフックを配置する関数です。公式マニュアル<body>body_class()の追加<body>タグにbody_class()を追加します。?>下記のようにページごと異なるクラスが自動で追加されますので、CSSでデザインを切り替える際などに利用します。?>>の一行のみを記述した場合の実際の出力例です。body_class()ページごとにCSSでデザインを設定できるように、body要素にページの種類に応じて異なるクラス属性を自動的に追加します。公式マニュアルサイト構築の場合は特に固定ページを個別に細かく作り込みますので、次のようにis_page()で固定ページか否かを判別して、body_class()に各ページ個別のスラッグを追加します。現在のページのスラッグはget_post($post)->post_nameで取得します。?>さらに、親ページが存在する場合は親ページのスラッグも追加します。get_post($post->post_parent)で親ページのIDの有無を判別して、親ページが存在する場合は親ページのスラッグを変数$parentに格納してbody_class()に追加します。親ページのスラッグはget_post($post->post_parent)->post_nameで取得します。)パラメータで指定されたIDの投稿または固定ページのレコードをデータベースから取得します。使用する際にはパラメータの$idが必須です。上記の例ではWordPressのグローバル変数$postで現在の記事IDを取得しています。$post現在の投稿(投稿、固定ページ、カスタム投稿タイプ)の情報(オブジェクト)を保持しています。ループ内に於いてthe_post()で更新されます。$post」の宣言無しでも使用できます。id=”wrapper”>〜</div>で囲みます。#wrapperのセレクタは、CSSでサイト全体の幅や背景画像などを設定する際に使用します。id="wrapper"><header>〜</header>サイト名とキャッチフレーズの追加まずはページのヘッダーにサイト名(bloginfo(‘name’))とキャッチフレーズ(bloginfo(‘description’))を追加します。サイト名にはサイトトップページ(home_url())に移動するようにリンクを追加します。?></p>グローバルナビゲーションの追加ナビゲーションはWordPressのカスタムメニューを使う方法もありますが、個人的にはサイト公開後のメンテナンス時にはテンプレートファイル上で管理できた方が何かと楽なので、下記のように独自に簡単なプログラムを記述しています。?></ul></nav>リスト項目内のページがアクティブな際には「class=”current”」を追加するように、「get_post($post)->post_name」または「get_post($post->post_parent)->post_name」で現在の記事IDまたは親記事のIDのスラッグを取得します。ヘッダーエリアの最後に、お問い合わせページへのリンクをデザインに合わせて追加します。</div>」となるように<div>タグで囲みます。id="siteContent">コンテンツエリアのタイトルバナーページのタイトルの取得にはget_the_title()を使用します。リクエストされたページが存在しない場合はタイトルバナーは使用しませんので、is_404()でページの有無を判別します。get_the_title()ループ内またはループ外で記事タイトルを取得する際に使用します。is_404()404エラーの発生状況を判定します。公式マニュアルコンテンツエリアのタイトルにはデザインに合わせてページごとに異なる画像をCSSで設定しますので、<body>タグのbody_class()を設定した時と同様に現在のページのスラッグを取得してh2要素にクラス属性として追加します。「$post->post_parent」で親ページ(の記事ID)の有無を確認して、存在する場合は「get_post($post->post_parent)->post_name」で親ページのスラッグも追加します。NavXT」を利用します。プラグインを追加インストール・有効化して、パンくずリストを表示したい箇所に下記のように「bcn_display()」を記述します。?></p>設定はほぼデフォルトのままで利用できると思いますが、デザインに応じて区切り文字やリンクの有無など適宜設定してください。ちなみにこのテーマ作例での設定は以下の通りです。now.」をクリックして設定を更新してください。・日付テンプレート(リンクなし)・404テンプレート(リンクなし)「<span><span>...</span></span>」→「<span><strong><span>...</span></strong></span>」に修正<main>〜</main>記事タイトルと記事本文の追加メインエリアにループで記事を挿入するテンプレートタグを記述します。<p>お探しのページは見つかりませんでした。Found</h1><p>お探しのページは見つかりませんでした。?></main>ここではとりあえず記事タイトル(the_title())と記事本文(the_content())が確認できれば良いので、メインエリアは簡易に作成します。ループ(while文)の後には、下記のように「have_posts()」で取得するデータが無かった場合の記述を追加します。the_ID()ループ内で記事IDを表示します。post_class()body_class()と同様に、記事の種類に応じてスタイルを設定するためのクラス属性を追加します。the_title()ループ内で記事タイトルを表示します。the_content()ループ内で記事本文を表示します。公式マニュアル<aside>〜</aside>サイドバーは後ほどページごとに作り込みますので、ここではとりあえず大まかにコーディングのみしておきます。alt=""></a></li></ul></section></aside>最後に、前項のメインエリアとサイドバーエリアを囲むdiv#siteContentの終了タグ</div>を追加します。--><footer>〜</footer>フッターナビゲーションはグローバルナビゲーションと同じ要領で記述します。?></ul></nav><address>にはサイト管理者の情報を記述します。メールアドレスを記載する場合は、迷惑メール対策にantispambot()関数を使ってエンティティ化しておきます。antispambot()スパム防止対策にメールアドレスをHTMLエンティティ化します。公式マニュアル(英語)サブナビゲーションはプログラム化するほどの量ではないので、普通に記述します。id=”wrapper”>の終了タグ</div>を追加します。--></body>wp_footer()の追加bodyの終了タグ</body>の直前にwp_footer()を追加します。?></body></html>wp_footer()はwp_head()と同じくWordPressの動作に欠かせない重要なアクションフックの関数ですので、忘れずに追加してください。wp_footer()WordPress本体やプラグインが動作する上で必要な記述を</body>タグ直前に追加するためのアクションフックを配置する関数です。mapホームお問い合わせCategoriesギャラリープラグインブランクテーマサイト構築WordPressMAMPMacOSX覚え書きMessage当サイトへのご意見・ご要望・ご感想など、お気軽にお聞かせください。←送信前にチェック※返信が必要な方は、こちらのお問い合わせフォームをご利用ください。