LogoMark.png

WordPress/Customize

WordPress

テーマのカスタマイズ

テーマ、すなわちページの雛形となる構成ファイルは、テーマごとのフォルダにまとめられて、以下のディレクトリに存在しています。テーマのカスタマイズとは、これらのファイルを編集することを意味します。

[ wordpressのフォルダ ] / wp-content / themes / [ テーマ名のフォルダ ]



CONTENTS




テーマを構成するファイル

はじめに、テーマを構成するファイルとその役割について確認します。固定ページ*1と投稿ページ*2の違いを理解している他、WordPress の利用経験があることを前提とした記事になっています。そもそも使ったことがない・・という方はまず使い方の解説をご覧ください

基本となるファイルとその役割

WordPressでは、index.php を基本として、そこへヘッダー部分のテンプレートである header.php や、フッター部分のテンプレートである footer.php を寄せ集めて、ページのテンプレートを完成させています。

一からテーマを作る場合、とりあえずは index.php と style.css があれば、最低限の動作は実現できますが、できれば header.php、sidebar.php、footer.php、ぐらいは用意した方がいいでしょう。

あればなお良いファイルとその役割

以下、通常は完備されるテンプレートですが、それが存在しない場合は、上位層(後述)のテンプレートで代用されるルールになっています。


テンプレート階層

WordPressは、リクエストされたページのURLからページの種類を判断して、使用するテンプレートファイルを優先順位に沿って選択していきます。この優先順位を定めたものをテンプレート階層と呼んでいます。
以下、公式サイトにある階層図です。

wp-template-hierarchy.jpg

下位層(図の左の方)の個別テンプレートが存在しない場合には、上位層のテンプレートでそれを代用。その頂点にあるのが、右端の index.php です。とりあえず index.php さえあればよい・・というのは、これがすべての表現の代用品として使えるからです。


テーマサンプル

テンプレートの編集

テーマファイルは、一般に手元のエディタで編集して、FTPでアップロードするのが通常の方法ですが、WordPressでは、ダッシュボードメニューの 外観 > テーマ編集 からブラウザ上で直接編集することが可能です。ビジュアルに関することはすべて style.css で管理されているので、まずは既存のテーマで、その style.css を編集してみるのがカスタマイズの第一歩です。
編集する前に手元にバックアップすることをお忘れなく。

index.php|ベースとなる雛形

index.phpでは、get_header()、get_sidebar()、get_footer()によって、ページのパーツを読み込むとともに、WordPressループによる記事の読み込みを行なって、ページ全体を完成させています。 

header.phpの編集

ヘッダーに画像ロゴを掲載するなど、headerブロックに何らかの構造的操作を加える必要がある場合は、header.php を開いて、画像を置くための IMGタグを、HTMLあるいはPHPとして記述する・・・ということになります。

footer.phpの編集

ヘッダー同様、フッターのカスタマイズには、footer.php を編集します。

sidebar.php

サイドバー部分も同様、sidebar.php を編集します。カスタムウィジェットが置かれていない場合に、デフォルトで表示する要素などを記述します。

style.css の編集

通常のスタイルシートと同様に、ページ内のセレクタに対応するスタイルを記述していきます。

/*   
Theme Name: Rose
Theme URI: テーマのホームサイトの URI
Description: a-brief-description
Author: 作者の名前
Author URI: 作者の URI
Template: 親テーマの定義(オプション)
Version: バージョン番号(オプション)
.
コメント(オプション)
.
*/

注意
style.cssはテーマの基幹ファイルです。「テーマの更新」を行うと、あなたが編集した部分も含めて、すべて新しいファイルで上書きされてしまうので注意してください。既存のテーマをカスタマイズする場合、子テーマを作ってそれを編集する」という方法をとれば、テーマの更新があっても、独自編集した部分は影響を受けません。

補足

wp_head() と wp_footer() について

WordPressのオリジナルテーマを作る際には、header.php と footer.phpの中にそれぞれ「wp_head()」と「wp_footer()」という関数を記述する必要があります。

これらは存在しなくても、一見何の変化もないため忘れがちですが、プラグインの動作に必要なので、欠かせません。wp_head()は、通常バージョン情報等をmetaタグ表示するのに機能していますが、事前に登録したjavascriptメソッドなどを呼び出す機能もあります。wp_footer()も同様、javascriptが書いてあったりするので、欠かせません。

header.phpの</head>の直前に、以下の記述が必要です。

<?php wp_head(); ?>

footer.phpの</body>の直前に、以下の記述が必要です。

<?php wp_footer(); ?>


トップページのみ異なるデザインにしたい・・

基本的にはトップページ用のテンプレートである home.php を別に作ればよいのですが、テンプレートを増やしたくない場合は、既存のテンプレートファイルに対して以下のような記述を行うことで、例外的な表示が可能です。

オリジナルの固定ページテンプレートを作るには

例えば、gallery.php などの名称で、オリジナルの表示構造をもつテンプレートを作りたい場合は、以下の手順で作業します。

以上で、準備完了です。あとは、「固定ページの編集」において、テンプレートの選択から Gallery を選べば、当該固定ページは、gallery.php をテンプレートとして出力されます。当然ですが、Galleryテンプレートは複数の固定ページで利用できます。

テンプレートごとにスタイルシートを分けるには

一般に、WordPressのスタイルは、style.css ひとつに書かれています(必須)。 header.php では以下のように書かれて読み込まれています。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"/>

よって、そこ(style.css)に共通スタイルを書いて、その他、ページごとに異なるスタイルについては、header.php に以下のように書くことで分岐させればよい・・・ということになります。

<?php
    if ( is_page_template('gallery.php') ) {
        echo '<link rel="stylesheet" media="screen" href="'. get_stylesheet_directory_uri(). '/gallery.css" />';
    } else {
        echo '<link rel="stylesheet" media="screen" href="'. get_stylesheet_directory_uri(). '/main.css" />';
    } 
?>

ここで、 is_page_template('gallery.php') というのは、「ページテンプレートとしてgallery.phpが使用されている場合は・・・」という条件を意味します。同様の振り分け方として、is_page( 'gallery' ) と書いた場合は、「galleryという名前のスラッグを持つページの場合は…」というような方法で、スタイルを振り分けることもできます。

参考サイト(外部リンク)






PAGES

GUIDE

DATA


*1 会社概要など、更新のない静的な情報のあるページを出力するためのテンプレートです
*2 投稿1件ごと1ページで出力するためのテンプレート
Last-modified: 2020-01-22 (水) 15:13:23