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

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

テーマの主な構成部品

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

検索フォームを生成

search.php

検索結果ページを生成
検索された語句を冒頭に表示する
検索結果ページにも引き続き検索ウィンドウを表示する

<h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>

JavaScript

JavaScript はできるだけ外部ファイル化
スクリプトのロードには wp_enqueue_scriptタグを使う

テンプレート優先順位

WordPress は受け取ったクエリ（URLなどと一緒にサーバに渡されるパラメータ）によって、利用するテンプレートファイルを決定する。以下はその利用順序

トップページ

home.php
index.php

記事ページ

single-{post_type}.php
single.php
singlar.php
index.php

@@ 114行目: / 114行目: @@
 <div class="content_col" style="columns: 3;">
-=====トップページ=====
+===トップページ===
 # home.php
 # index.php
-=====記事ページ=====
+===記事ページ===
 # single-{post_type}.php
 # single.php