「WordPressテーマを作る」の版間の差分

2019年2月21日 (木) 15:07時点における版

テーマの主な構成部品

WrodPressサイト
テンプレートファイルのセット + データベースのデータ

テンプレートファイル

テーマは「テンプレートファイル」と呼ばれる以下のようなファイル群で構成され、wp-content/themes/your_themeディレクトリ内に格納される。

style.css

サイトのスタイルシート
冒頭にコメントとしてテーマ詳細を書くと管理画面のテーマ一覧に表示されるようになる
ただし、ファイルの一番先頭は @charset

@charset "UTF-8";
/*
Theme Name: hoge
Theme URI: https://hoge.com/themes/hoge
Author: hoge
Author URI: https://hoge
Description: hoge hoge.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: hoge, hoge
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/

screenshot.png

テーマ一覧に画像で表示されるようになる。JPEG, GIF でも可。推奨サイズは 880×660

function.php

テーマに関するあらゆる機能の実装を指定
サイト生成時に読み込まれる
基本的にはメニュー機能、ウィジット機能を実装すべき
基本的にプラグインと同じ動作。記述方法はプラグイン制作がそのまま参考になる

header.php

サイトのヘッダ部分を生成
<head>内には以下のように記述できる

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

wp_titleタグは使えない。代わりに wp_get_document_title機能が使える
bloginfo('charset') は基本的に UTF-8 がセットされる
header.php にはスタイルシートはリンクしない
wp_headタグはプラグインがコードを挿入する場所

sidebar.php

サイトのサイドバー部分を生成
サブメニューはドロップダウン推奨

footer.php

サイトのフッタ部分を生成
wp_footerタグは </body> の直前に挿入

index.php

トップページを生成
ページングのために wp_link_pagesタグを記述
基本的には以下のようにしてヘッダやフッタを取り込む

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

page.php

固定ページを生成
ページングのために wp_link_pagesタグを記述
日付、タグ、カテゴリー、著者などのメタデータは表示しない

single.php

記事ページを生成
ページングのために wp_link_pagesタグを記述
日付と時刻を表示させるために the_time( get_option( 'date_format' ) ) を使う
適切であればタグ、カテゴリー、著者などのメタデータを表示させる
previous_post_linkタグと next_post_linkタグでページング

archive.php

アーカイブページを生成
ページングのために wp_link_pagesタグを記述

comments.php

コメントページを生成
著者のコメントのデザインを目立たせて一般ユーザと区別する
適切であれば Gravatar を表示させる
スレッド形式に対応させる

searchform.php

検索フォームを生成

@@ 29行目: / 29行目: @@
 ===screenshot.png===
-テーマ一覧に画像で表示されるようになる。JPEG, GIF でも可。推奨サイズは 880×660
+* テーマ一覧に画像で表示されるようになる。JPEG, GIF でも可。推奨サイズは 880×660
 ===function.php===