SkillSet

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

← 古い編集
 
(同じ利用者による、間の16版が非表示)
113行目: 113行目:
WordPress は受け取ったクエリ（URLなどと一緒にサーバに渡されるパラメータ）によって、利用するテンプレートファイルを決定する。以下はその利用順序
WordPress は受け取ったクエリ（URLなどと一緒にサーバに渡されるパラメータ）によって、利用するテンプレートファイルを決定する。以下はその利用順序


<div style="columns: 3;">
<div class="content_col" style="columns: 3;">
====トップページ====
===トップページ===
# home.php
# home.php
# index.php
# index.php


====記事ページ====
===記事ページ===
# single-{post_type}.php
# single-{post_type}.php
# single.php
# single.php
# singlar.php
# singlar.php
# index.php
===固定ページ===
# page-{slug}.php
# page-{id}.php
# page.php
# singlar.php
# index.php
===カテゴリーページ===
# category-{slug}.php
# category-{id}.php
# category.php
# archive.php
# index.php
===タグページ===
# tag-{slug}.php
# tag-{id}.php
# tag.php
# archive.php
# index.php
===カスタム投稿ページ===
# archive-{post_type}.php
# archive.php
# index.php
===カスタム分類ページ===
# taxonomy-{taxonomy}-{term}.php
# taxonomy-{taxonomy}.php
# taxonomy.php
# archive.php
# index.php
===著者ページ===
# author-{name}.php
# author-{id}.php
# author.php
# archive.php
# index.php
===日付ページ===
# date.php
# archive.php
# index.php
===検索結果ページ===
# search.php
# index.php
===404ページ===
# 404.php
# 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 で指定することが推奨
===メニュー機能を実装===
ブログにグローバルメニューやサイドメニューを実装する。管理画面の「外観 > メニュー」から管理できるようになる。
function register_my_menu() {
    register_nav_menu('global-menu',__( 'グローバルメニュー' ));
}
add_action( 'init', 'register_my_menu' );
#複数登録する場合
function register_my_menus() {
    register_nav_menus(
        array(
        'global-menu' => __( 'グローバルメニュー' ),
        'side-menu' => __( 'サイドメニュー' )
        )
    );
}
add_action( 'init', 'register_my_menus' );
下記コードで好きな場所に表示させることができる。
<pre><nav>
<?php wp_nav_menu( array(
'theme_location'=>'global-menu',
'container' =>'',
'menu_class' =>'',
'items_wrap' =>'<ul id="main-nav">%3$s</ul>'));
?>
</nav></pre>
===ウィジェット機能を実装===
<pre>function theme_slug_widgets_init() {
register_sidebar( array(
'name' => 'ウィジットエリア',
'id' => 'sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<p class="side-title">',
'after_title' => '</p>',
) );
}
add_action( 'widgets_init', 'theme_slug_widgets_init' );</pre>
===アイキャッチ画像機能を実装===
add_theme_support( 'post-thumbnails' );
===余計なヘッダを削除===
初期状態の WordPress <head>内には余計なタグがたくさん挿入されている。それらを消したい場合は function.php にその旨を記述する。
<nowiki>add_filter( 'emoji_svg_url', '__return_false' );
← <link rel='dns-prefetch' href='//s.w.org' />
remove_action('wp_head', 'wp_generator');
← <meta name="generator" content="WordPress 4.9.6" />
remove_action('wp_head', 'rsd_link');
← <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://galellia.com/xmlrpc.php?rsd" />
remove_action('wp_head', 'wlwmanifest_link');
← <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://galellia.com/wp-includes/wlwmanifest.xml" />
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
← <script type="text/javascript">window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/ima ...
remove_action( 'wp_print_styles', 'print_emoji_styles' );
← <style type="text/css">img.wp-smiley,img.emoji {display: in ...
remove_action('wp_head','rest_output_link_wp_head');
← <link rel='https://api.w.org/' href='https://galellia.com/wp-json/' />
remove_action('wp_head','wp_oembed_add_discovery_links');
← ?
remove_action('wp_head','wp_oembed_add_host_js');
← <script type='text/javascript' src='https://galellia.com/wp-includes/js/wp-embed.min.js?ver=4.9.6'></script>
rremove_filter('the_title', 'wptexturize');
remove_filter('the_content', 'wptexturize');
← タイトルとコンテンツ内のハイフン自動変換を無効</nowiki>
==投稿のループ表示==
WordPress では１件あるいは複数の投稿表示にループ機能を利用する。
ループ始まり：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
ループ終わり：
<nowiki> <?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?></nowiki>
* [http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query WP_Query] - クエリを変更するときは、こちらを使う
* [http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts query_posts] -query_posts は決して使うべきではありません。... 投稿の取得には WP_Query あるいは get_posts を使ってください

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

テーマの主な構成部品

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 で指定することが推奨

メニュー機能を実装

ブログにグローバルメニューやサイドメニューを実装する。管理画面の「外観 > メニュー」から管理できるようになる。 

function register_my_menu() {
    register_nav_menu('global-menu',__( 'グローバルメニュー' ));
}
add_action( 'init', 'register_my_menu' );

#複数登録する場合
function register_my_menus() {
    register_nav_menus(
        array(
        'global-menu' => __( 'グローバルメニュー' ),
        'side-menu' => __( 'サイドメニュー' )
        )
    );
}
add_action( 'init', 'register_my_menus' );

下記コードで好きな場所に表示させることができる。 

<nav>
 <?php wp_nav_menu( array(
 'theme_location'=>'global-menu',
 'container' =>'',
 'menu_class' =>'',
 'items_wrap' =>'<ul id="main-nav">%3$s</ul>'));
 ?>
 </nav>

ウィジェット機能を実装

function theme_slug_widgets_init() {
 register_sidebar( array(
 'name' => 'ウィジットエリア',
 'id' => 'sidebar',
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<p class="side-title">',
 'after_title' => '</p>',
 ) );
 }
 add_action( 'widgets_init', 'theme_slug_widgets_init' );

アイキャッチ画像機能を実装

add_theme_support( 'post-thumbnails' );

余計なヘッダを削除

初期状態の WordPress <head>内には余計なタグがたくさん挿入されている。それらを消したい場合は function.php にその旨を記述する。 

add_filter( 'emoji_svg_url', '__return_false' );
 ← <link rel='dns-prefetch' href='//s.w.org' />
 
 remove_action('wp_head', 'wp_generator');
 ← <meta name="generator" content="WordPress 4.9.6" />
 
 remove_action('wp_head', 'rsd_link');
 ← <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://galellia.com/xmlrpc.php?rsd" />
 
 remove_action('wp_head', 'wlwmanifest_link');
 ← <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://galellia.com/wp-includes/wlwmanifest.xml" /> 
 
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 ← <script type="text/javascript">window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/ima ...
 
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 ← <style type="text/css">img.wp-smiley,img.emoji {display: in ...
 
 remove_action('wp_head','rest_output_link_wp_head');
 ← <link rel='https://api.w.org/' href='https://galellia.com/wp-json/' />
 
 remove_action('wp_head','wp_oembed_add_discovery_links');
 ← ?
 
 remove_action('wp_head','wp_oembed_add_host_js');
 ← <script type='text/javascript' src='https://galellia.com/wp-includes/js/wp-embed.min.js?ver=4.9.6'></script>
 
 rremove_filter('the_title', 'wptexturize');
 remove_filter('the_content', 'wptexturize');
 ← タイトルとコンテンツ内のハイフン自動変換を無効

投稿のループ表示

WordPress では１件あるいは複数の投稿表示にループ機能を利用する。

ループ始まり： 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

ループ終わり： 

 <?php endwhile; else : ?>
 <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
 <?php endif; ?>
  • WP_Query - クエリを変更するときは、こちらを使う
  • query_posts -query_posts は決して使うべきではありません。... 投稿の取得には WP_Query あるいは get_posts を使ってください
「https://skillset.wiki/index.php?title=WordPressテーマを作る&oldid=699」から取得