SkillSet

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

← 古い編集新しい編集 →
177行目: 177行目:
# index.php
# index.php
</div>
</div>
==テーマの機能ファイル - function.php==
function.php はテーマに機能を実装させるためのテンプレートファイル。タイトル機能、スタイルシート機能、メニュー機能、ウィジェット機能など、様々な機能を実装させることができる。
あくまでも PHP の機能として実装されるため、function.php の先頭行は <?php を記述。
===タイトル機能を実装===
HTML文書に titleタグを追加する。下記の例はサイトディスクリプションは非表示。プラグイン「All In One SEO Pack」を導入しても良い。
add_theme_support( 'title-tag' );
function wp_document_title_parts ( $title ) {
if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );
}
return $title;
}
add_filter( 'document_title_parts', 'wp_document_title_parts', 10, 1 );
===スタイルシート機能を実装===
function theme_name_scripts() {
    wp_enqueue_style( 'my-stylesheet', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
＊ WordPress ではスタイルシートは上記のように function.php で指定することが推奨

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

テーマの主な構成部品

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などと一緒にサーバに渡されるパラメータ）によって、利用するテンプレートファイルを決定する。以下はその利用順序

トップページ

  1. home.php
  2. index.php

記事ページ

  1. single-{post_type}.php
  2. single.php
  3. singlar.php
  4. index.php

固定ページ

  1. page-{slug}.php
  2. page-{id}.php
  3. page.php
  4. singlar.php
  5. index.php

カテゴリーページ

  1. category-{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

タグページ

  1. tag-{slug}.php
  2. tag-{id}.php
  3. tag.php
  4. archive.php
  5. index.php

カスタム投稿ページ

  1. archive-{post_type}.php
  2. archive.php
  3. index.php

カスタム分類ページ

  1. taxonomy-{taxonomy}-{term}.php
  2. taxonomy-{taxonomy}.php
  3. taxonomy.php
  4. archive.php
  5. index.php

著者ページ

  1. author-{name}.php
  2. author-{id}.php
  3. author.php
  4. archive.php
  5. index.php

日付ページ

  1. date.php
  2. archive.php
  3. index.php

検索結果ページ

  1. search.php
  2. index.php

404ページ

  1. 404.php
  2. index.php

テーマの機能ファイル - function.php

function.php はテーマに機能を実装させるためのテンプレートファイル。タイトル機能、スタイルシート機能、メニュー機能、ウィジェット機能など、様々な機能を実装させることができる。

あくまでも PHP の機能として実装されるため、function.php の先頭行は <?php を記述。

タイトル機能を実装

HTML文書に titleタグを追加する。下記の例はサイトディスクリプションは非表示。プラグイン「All In One SEO Pack」を導入しても良い。 

add_theme_support( 'title-tag' );
function wp_document_title_parts ( $title ) {
if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );
}
return $title;
}
add_filter( 'document_title_parts', 'wp_document_title_parts', 10, 1 );

スタイルシート機能を実装

function theme_name_scripts() {
    wp_enqueue_style( 'my-stylesheet', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

＊ WordPress ではスタイルシートは上記のように function.php で指定することが推奨

「https://skillset.wiki/index.php?title=WordPressテーマを作る&oldid=691」から取得