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

« おーぷんlog2　はじめました — ChromeでSyntaxHighlighter Evolvedが動かないとき »

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

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

ALO

手順の概要
公式リファレンス
よく使うタグ

手順の概要

ページのデザイン

最低限、トップページ、アーカイブページ、個別の記事ページが必要
1を元に、HTML、CSS、JavaScriptなどを使い、静的ページとしてコーディング

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(‘« %link’) ?>
上記のパラメーター指定で、« 前の記事のタイトルという形で表示される。

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

next_post_link

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

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

その他のパラメーター設定についてはテンプレートタグ/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にすると、元画像の縦横比のまま縮小される。

Day:2011.07.03

Category：work

Tag：Webデザイン, Wordpress, チートシート

« おーぷんlog2　はじめました — ChromeでSyntaxHighlighter Evolvedが動かないとき »