WordPressテーマ用サンプルコード

テーマ用のサンプルコード(スニペット)を紹介します。必要なものをコピーして使用してください。

ヘッダーの表示 (シンプル)

基本的なヘッダーの表示です。ヘッダー(header.php)に使用することができます。

※ 文字化けしないための設定、タイトル表示、スタイルシートの設定、プラグインのファイル読み込み設定が含まれています。下記も確認するとよいかもしれません。

※ 「<div class="body-inner">」は、ページの幅を決めて中央寄せにするなどのスタイルをつける際に使用します。「<div id="wrap">」などに変更してもよいですし、消してもよいです。

※ CSS用の<link>をそのまま記載していますが、<link>を使わずに「テーマにCSS、JavaScriptを追加する (functions.php)」のように設定することもできます。

ヘッダーの表示 (各種情報付き)

サイト名、キャッチフレーズ、検索フォーム付きのヘッダー表示です。

表示例
テストサイト_-_Just_another_WordPress_site

OGP, Twitterカード

Facebook, Twitterカード用の<meta>タグです。ヘッダーの必要な箇所に設置してください。「FacebookのAPP_ID」の箇所はFacebookから取得したAPP_ID、「@TwitterID」の箇所はTwitterのアカウントを設定します。

確認したいページのURLを下記に入力すると正しく設定されているか確認できます。

フッターの表示 (シンプル)

基本的なフッターの表示です。フッター(footer.php)に使用することができます。

※「</div>」の個数はheader.phpに合わせて調整してください。

フッターの表示 (コピーライト付き)

「Copyright © 2015 ○○ All rights reserved.」のようなコピーライト付きのフッターの表示です。年の部分は自動的に最新の年に更新されます。

 

※ 「<?php echo date("Y"); ?>」でもよいですが、WordPressではサーバの環境にかかわらず日本時間ではなくUTCと呼ばれる世界標準の時間で時刻を扱っているため date() だと時間が9時間ずれる問題があります。(「2017年」と表示されるのが2017年1月1日の9時0分になります)

投稿の表示 (シンプル)

シンプルな投稿表示です。タイトルと内容が表示されます。投稿ページ(single.php)などに使用することができます。

表示例

投稿の表示 (各種情報付き)

投稿日時、カテゴリーなどの情報を含んだ投稿表示です。投稿ページ(single.php)などに使用することができます。好きな順番に入れ替えたり、不要な箇所を削除するなどして使用してください。

表示例

※投稿日時、更新日時を日付だけにしたい場合は「Y/m/d H:i:s」の部分を「Y/m/d」にするとよいです。

投稿の表示 (一覧用)

投稿一覧を表示(タイトルリンクのみ)する場合の投稿表示です。カテゴリーページ(category.php)などで使用できます。

表示例

投稿の表示 (一覧用。抜粋付き)

投稿一覧を抜粋付きで表示する場合などの投稿表示です。検索ページ(search.php)などで使用できます。

表示例

投稿の表示(新着記事用)

投稿日、カテゴリ、タイトルリンク付きの、新着記事表示に向いた投稿表示です。トップページ(home.php)で使用できます。

「設定」 > 「表示設定」 > 「フロントページの表示」を「最新の投稿」にしてください。「1ページに表示する最大投稿数」の設定にある投稿数分表示されます。

表示例

※トップページのみ投稿数を変更するには「トップページのみ表示する最大投稿数を変更する」をご確認ください。

 更新履歴

  • 2016/05/04 ご要望を受けて表示例を追加しました。また、下記の記載を追加しました。
    • CSSを<link>ではない方法で追加するための説明
    • コピーライトの年表示について時間が9時間ずれる問題の説明
  • 2015/12/13 「ヘッダーの表示」などの<title>が上手く表示できていなかったので修正しました。
  • 2015/12/13 「OGP, Twitterカード」で「アイキャッチがないが本文欄に画像がある場合は本文欄に最初に登場する画像をog:imageに設定する」ように動作を変更しました。
  • 2015/11/29 初版

コメント

内容の誤りなどがありましたら下記からご連絡をお願いします。頂いたコメントは基本的に公開されることはありません(必要な場合は個別に返信させて頂きます)。

CAPTCHA