HOME(Lifelog&Notes)>Notes

WordPressオリジナルテーマを作るときの覚え書き

WordPressのテンプレートを一から作るときに便利な情報をまとめました。
自分のための覚え書きです。

ALO

手順の概要

  1. ページのデザイン

    最低限、トップページ、アーカイブページ、個別の記事ページが必要

  2. 1を元に、HTML、CSS、JavaScriptなどを使い、静的ページとしてコーディング
  3. WordPressテーマファイルの作成

    wp-content/themesフォルダに、標準的には以下のファイルが必要

    index.php 基本のテンプレート
    single.php 個別記事のテンプレート
    header.php ヘッダ部分の共通テンプレート
    sidebar.php サイドナビゲーション部分の共通テンプレート
    footer.php フッター部分の共通テンプレート
    style.css 基本のスタイルシート

    ※今回の「おーぷんlog2」のテーマは、これに加えてhome.phpを作成。
    トップページ→home.php、個別記事ページ→single.php、
    それ以外のページ→index.phpとなっている。

Webクリエイターボックスさんの記事が、ざっと概要をつかんだり、基本的なコードをコピペするのに便利
→ WordPress オリジナルテーマの作り方 | Webクリエイターボックス

公式リファレンス

WordPress Cordex 日本語版 Main Page

よく使うタグ

headerの記述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="Ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>" />
<meta name="keywords" content="サイトのキーワード" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico">
<!--?php wp_head(); ?-->

最後の<?php wp_head(); ?>を忘れないこと。
これにより、WordpressがRSSフィードの link要素、プラグインのためのコードなど、必要なコードを生成する。

サイトの情報を取得するタグ bloginfo

例えば <?php bloginfo(‘name’); ?> ならサイトのタイトルなど、サイトに関する様々な情報を取得できる。

変数 取得出来る情報 使用例
name WordPressの管理画面で設定したサイトのタイトル <title><?php bloginfo(‘name’); ?></title>
stylesheet_url 使用中のメインCSSファイルのURL

スタイルシートの指定
<link rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>”>

template_url 使用中のテーマファイルのURL 画像やJSファイルのパスを取得するとき
index.phpと同階層にある imagesフォルダ内の logo.jpg という画像を参照する場合は
<?php bloginfo(‘template_url’); ?>/images/logo.jpg

その他、RSSフィードのURL取得など。
公式のリファレンス テンプレートタグ/bloginfo – WordPress Codex 日本語版

前後ページへのリンク
posts_nav_link インデックスやアーカイブページなどが複数ページにわたる場合の前後のページへのリンク

書式
<?php posts_nav_link(‘「前」「後」のリンクの間に表示する記号や文字を指定’,’前の記事へのリンクとして出力する記号やテキスト’,’後の記事へのリンクとして出力する記号やテキスト’); ?>

詳細はテンプレートタグ/posts nav link – WordPress Codex 日本語版

revious_post_link 個別の記事ページでの前のページへのリンク

書式
<?php previous_post_link(‘&laquo;&nbsp;%link’) ?>
上記のパラメーター指定で、« 前の記事のタイトル という形で表示される。

その他のパラメーター設定についてはテンプレートタグ/previous post link – WordPress Codex 日本語版

next_post_link 個別の記事ページでの次のページへのリンク

書式
<?php next_post_link(‘%link&nbsp;&raquo;’) ?>
上記のパラメーター指定で、次の記事のタイトル » という形で表示される。

その他のパラメーター設定についてはテンプレートタグ/next post link – WordPress Codex 日本語版

記事を表示するループのタグ
<!--?php if (have_posts()) : ?-->
    <!--?php while (have_posts()) : the_post(); ?-->
      <!-- ここに記事の内容を記述する -->
    <!--?php endwhile; ?-->

    <!--?php else : ?-->
      <!-- ここに表示する記事がなかった場合の表示内容を記述する -->

<!--?php endif; ?-->
記事の要素を表示するタグ
タグ 表示内容 使用例
the_title_attribute 記事のタイトル
the_permalink 記事のURL
the_post_thumbnail サムネイル画像
the_conent 記事の本文 次のように、パラメーターに本文の続きへのリンクとして表示する文字列を指定できる。(デフォルト値は「(more…)」)
例)the_content(‘続きを読む’)
the_time 投稿日時 日付の表示形式をPHPの日付文法で指定できる。
例)the_time(‘Y.m.d’)
※同一日の複数投稿の最初の投稿にのみ表示する場合は、the_dateを使う。
the_category カテゴリ 複数あるときの区切り文字・記号をパラメーターで指定できる。
例)the_category(‘, ‘)
the_tags タグ 複数あるときの区切り文字と、タグ一覧の前後に表示する文字を指定できる。
例)<?php the_tags(‘この記事のタグ:’, ‘,’,’タグは以上です’); ?>
サイドバーでよく使うタグ
dynamic_sidebar ウィジェットの呼び出し
wp_list_categories リンク付きカテゴリ一覧の表示
wp_tag_cloud タグクラウド
wp_get_archives リンク付きアーカイブ一覧
フッターの記述

<?php wp_footer(); ?>を忘れないこと。
wp_header 同様、プラグインのためのコードなどが生成される。

function.phpの記述

RSSフィードのURLを <header>タグ内に出力する add_theme_support( ‘automatic-feed-links’ );
サムネイル画像の表示設定

add_theme_support( ‘post-thumbnails’ );

次のように表示するサイズと表示の仕方が設定できる。
例)set_post_thumbnail_size(横幅のピクセル数, 縦幅のピクセル数, 切り抜きするかどうか );
※縦横幅は単位なしで数値のみ指定
※最後の引数を trueにすると、指定した縦横幅に切抜開かれる。指定なし、または falseにすると、元画像の縦横比のまま縮小される。