この投稿では、WordPressのデザインをカスタマイズするための基礎知識やテクニックを紹介させていただいております。
WordPressテーマの、この部分をいじりたいけど、どのファイルをいじればいいの?これを追加するためにはどうすればいいの?など、カスタマイズの基本から、役立つテクニックなど記載しています。
目次
WordPressのデザイン基本構成
WordPressのファイル構成
Webページのデザインは、ヘッダー、フッター、左右サイドバーそしてコンテンツという部分に分けられるのが基本です。
htmlのコードで最も簡単に書くと、下記のようになります。
(htmlコード例1: front-page.html)
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <header>ヘッダー</header> <div>コンテンツ</div> <aside>左サイドバー</aside> <aside>右サイドバー</aside> <footer>フッター</footer> </body> </html>
WordPressでは、このようにhtmlファイルにずらーっと1ページ分のコードを書きません。phpファイルによって、構成部分に分けて書かれているのがふつうです。phpが実行されて、htmlコードが出力されていくイメージです。
それではfront-page.htmlを、WordPress風にphpファイルに分けたものをリストアップします(概略をつかむイメージとして、最も単純で簡単な例です)。このように、構成要素ごとにファイル分けすることで共通の部分を使いまわしでき、開発がかなり楽になるなどの利点があります。
- front-page.php
- ページ全体の記述がなされたキーファイル
- header.php
- ヘッダー部分の記述がなされたファイル
- content.php
- コンテンツ部分の記述がなされたファイル
- sidebar.php
- サイドバー部分の記述がなされたファイル
- footer.php
- フッター部分の記述がなされたファイル
ファイルの中身を見ていきましょう。
front-page.php
<?php get_header(); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); // 投稿ページ一覧を表示するテンプレート読込; endwhile; else : get_template_part( 'content' ); // content.php読込 endif; ?> <?php get_sidebar(); ?> <?php get_footer();
front-page.phpは、サイトのトップページに使われるテンプレートです。これだけだと、ただのphpのプログラムですね・・・。
でもよく見ると、get_header()、get_template_part()、get_sidebar()そしてget_footer()という関数で、各々の構成要素が読み込まれていることがわかります。
have_posts()は、このテンプレートの表示が投稿ページとして使われているときに、表示すべき投稿があるかどうかを判断します。
if( have_posts() )とwhile( have_posts() ): the_post();は、テンプレートで必ず出てくる形です。
header.php
<!DOCTYPE html> <html <?php language_attributes(); ?> > <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header>ヘッダー</header>
ここで、html、head、bodyなどのhtmlでおなじみのタグが出てきました。構成がわかりやすくなりましたね。ただし、phpの関数が頻繁に出てきます。
例えば言語ロケールを示すlang属性は、language_attributes()という関数で呼び出されます。
WordPressでは、管理画面の設定で、サイトタイトル、キャッチフレーズ、サイトの言語などを設定できます。これらの設定をWordPressが用意した関数で呼び出し、タグを追加することができるのです。
bloginfo()も同様にWordPressにて用意されている関数です。wp_head()は、headの閉じタグ直前に置くことが義務付けられています。スタイルシート、スクリプト、プラグインやサイトのタイトルなどが読み込まれます。
content.php
<div> <?php //コンテンツ ?> </div>
コンテンツ部分が記載されているphpファイルです。
sidebar.php
<?php if ( ! is_active_sidebar( 'sidebar' ) ) { return; } ?> <aside> <?php dynamic_sidebar( 'sidebar' ); ?> </aside>
is_active_sidebar()で、サイドバーのウィジェットが1つでも設定されていたら有効になります。
dynamic_sidebar();で、サイドバーに設定されているウィジェットが読み込まれます。
footer.php
<footer> //フッター </footer> <?php wp_footer(); ?> </body> </html>
最後はフッターです。
bodyの閉じタグ前に、wp_footer()が必要です。スクリプトやプラグインなどが読み込まれます。
いかがですか?ヘッダー、サイドバーやフッターなどの共通部分をファイルにまとめておいて、関数で呼び出して使いまわしできることが容易に想像できますね。
デザインの変更は、全ページに及ぶことなく、一つのファイルを変更すればよいことになります。
構成部分をファイルや関数毎に細かく分けて開発することの意義をわかっていただけたかと思います!
既存テーマをカスタマイズするときのコードの調べ方
既存テーマをカスタマイズする際は、phpやhtmlの長いコードが混在していて、わかりにくいものです。ファイルもたくさんあって、どれを見ればよいのか?・・・めげそうになります。しかし!ご安心ください。
次のような流れで、編集すべきファイルや関数を早く見つけることができます。!
調べたい要素に適用されているクラス名を使って検索する
例として、twentyseventeenの、ブログ投稿日をどのように出力しているかを調べてみましょう。
下の図のように、日付部分を右クリック->検証を選択します。ディベロッパーツールが開きます。
日付の要素に適用されているクラス名を見つけます。entry-metaというクラス名です。
次に、phpのテンプレートファイルの中で、entry-metaが使われている部分を探します。
慣れないうちは、テンプレートファイルを順番に検索していくのですが、慣れてくればファイル名で判断できるようになります。下記のcontent.phpの中でentry-metaを見つけることができました。
/twentyseventeen/template-parts/post/content.php
調べてみると、投稿ページであればtwentyseventeen_posted_on()、それ以外であればtwentyseventeen_time_link()とtwentyseventeen_edit_link()という関数によって日付が出力されていることがわかります。
それらの関数は、次のファイルの中に見つけることができます!あとは、ご希望に応じて関数を編集すれば良いです。
/twentyseventeen/inc/template-tags.php
クラス名だけじゃなくて、idやコメントの内容で検索しても良いですね!
テーマのカスタマイズには子テーマを使おう!
WordPressのデザイン(テーマのデザイン)をカスタマイズする際には、使用するテーマの子テーマをつくるのが良いと思います。親テーマそのものをカスタマイズすると、アップデートすると上書きされてしまうからです。子テーマを作っておけば、カスタマイズした部分はそのまま残ります。
子テーマの作り方は、下記の記事で紹介させていただいております。
WordPressデザインのカスタマイズを実践しよう!
次からは、具体的な例を示しながら、カスタマイズのテクニックをご紹介します!
せっかくなので、SEOにも効果を発揮するデザインカスタマイズをしたいですよね!ここでは、ユーザビリティを向上させることができ、クローラーの巡回も促すと言われている、ナビメニュー、パンくずリスト、サイドバーを効果的に配置してみたいと思います。
- ナビメニューにカテゴリー一覧を自動出力しちゃおう!
- パンくずリストを表示しよう!
- サイドバーを自在にデザインしよう!
ナビメニューにカテゴリー一覧を自動出力
ナビメニューは、管理画面->外観->メニューで、自由に追加できるのですが、僕は、カテゴリーやタグを自動で出力できるようにしたいと思っていたので、この機会に実施してみたいと思います。自動で出力しておけば、カテゴリーやタグを追加したときもいちいちメニューに追加する作業をしなくても良いので、楽ですね!
ナビメニューに関する記述は、header.phpにあるはずです。このファイルの中を見てみると、下記のような記述がありました。
(header.phpの中のとある行)
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
ディレクトリ
/wordpress/wp-content/themes/twentyseventeen/template-parts/navigation/
の中に、navigation-top.phpというファイルがありました。この中にナビメニューを出力させている処理の実態があります。
navタグの中にある次の部分が、ナビゲーションを出力している部分です。
(navigation-top.phpの一部分)
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_id' => 'top-menu', ) ); ?>
上記の部分を下記のように書き換えます。wp_list_categories()というWordPressの関数を使用して、カテゴリー一覧をリスト形式で出力します。twentyseventeenは、スマホ表示のときメニューがボタンになり、idが”top-menu”の<ul>を<div>でくくってあげると、ボタン操作でメニューリストが出現したり隠れたりしてくれます。
<div> <ul id="top-menu" class="menu"> <?php $args = array( 'show_option_all' => '', 'orderby' => 'name', 'order' => 'ASC', 'style' => 'list', 'show_count' => 0, 'hide_empty' => 1, 'use_desc_for_title' => 1, 'child_of' => 0, 'feed' => '', 'feed_type' => '', 'feed_image' => '', 'exclude' => '', 'exclude_tree' => '', 'include' => '', 'hierarchical' => 1, 'title_li' => __( '' ), 'show_option_none' => __( '' ), 'number' => null, 'echo' => 1, 'depth' => 0, 'current_category' => 0, 'pad_counts' => 0, 'taxonomy' => 'category', 'walker' => null ); wp_list_categories( $args ); ?> </ul></div>
wp_list_categories()の使い方は、テンプレートタグ/wp list categories – WordPress Codex 日本語版に詳しく書かれています。styleを’list’にしておけばOKだと思います。taxonomyは、投稿であれば’category’です。カスタム投稿の場合はその名前に変更してください。
メニューは、空にして保存しておきます。
カテゴリー一覧のメニューが追加されました!
パンくずリストを表示しよう!
パンくずリストは、ユーザーが現在見ているページが、サイト内のどこに位置するかを示すパスをリンクと共に表示するものです。ユーザービリティの向上とともに、クローラーの巡回を促すということでSEOにも効果を発揮すると、多くのブログで説明されています。クローラーの巡回を促すには、ちゃんとした構造化データにすることが必要・・・とのことで、難しそうな感じもしますが、WordPressにはちゃんとそれに対応したプラグインが用意されています。
僕は、Breadcrumb NavXTというプラグインを使用しています。このプラグインは、RDFa Liteというマークアップ方法でパンくずリストを生成してくれるすぐれものなんです!
プラグインをインストール&有効化して、パンくずリストを挿入したい部分に次のコードを入れれば出力してくれます。プラグインのサイトに使い方が詳しく説明されています。
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>
せっかくなので、WordPressらしく(phpらしく?)関数化して使いやすくしておきましょう。
functions.php内に追加する関数例。
if ( ! function_exists( 'show_breadcrumbs' ) ): function show_breadcrumbs() { echo __('<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList" id="crumbs">' , 'twentyseventeen'); if( function_exists('bcn_display') ) { bcn_display(); } echo __('</div>', 'twentyseventeen'); } endif;
あとは、パンくずリストを出力したい部分でこの処理を実行させればOKです。
僕は、twentyseventeenを使っていますが、index.php、archive.php、page.php、single.phpの中の下記の部分に入れました。
<div class="wrap"> <?php show_breadcrumbs(); ?> <?php if ( is_home() && ! is_front_page() ) : ?>
下の画像のように、パンくずリストを加えることができました!
パンくずリストをつくったら、適切にマークアップされているかをチェックできるGoogleの構造化データテストツールで確認します。エラーが無いか調べることができますよ。
twentyseventeenの右サイドバーを左サイドバーに変更する
twentyseventeenのサイドバーはデフォルトで右サイドバーですね。これを左サイドバーに変えてみたいと思います。cssを少し変更するだけでOKです。
cssを調べるため、ブラウザのコンテンツ領域を右クリック->検証を選択します。ディベロッパーツールが開きます。
Elementsの表示で、
(1)コンテンツ領域全体が選択される要素をクリックします。ここでは、idがprimaryという要素です。
(2)コンテンツ全体が選択されていますね?
(3)その部分のスタイルを調べます。float: left;となっているはずです。
子テーマのstyle.cssに、float: right;を上書きします。
.has-sidebar:not(.error404) #primary { float: right; }
同様に、
(1)サイドバー領域全体が選択される要素をクリックします。ここでは、idがsecondaryという要素です。
(2)サイドバー全体が選択されていますね?
(3)その部分のスタイルを調べます。float: right;となっています。
同様に、float: left;にしてスタイルを上書きします。
.has-sidebar #secondary { float: left; }
スタイルを上書きすることで、下の画像のように右サイドバーが左サイドバーに変更されています!
ここでは説明を省きますが、ウィジェットを追加すれば左右のサイドバーにすることもできます。ウィジェットの追加方法は、下記で説明させていただいております。
独自のスタイルシートの追加/読込
WordPressのカスタマイズには、スタイルシート(cssファイル)の変更が欠かせません。テーマのスタイルを書き換えるときはstyle.cssを編集すればOKです。でも、独自にデザインしたスタイルが増えてくると、いろいろなサイトで使いまわす際に、style.cssの中を探し回るのが大変!僕は、独自作成のスタイルを集めたスタイルシートを作成し、このファイルを読み込むことで様々なサイトで使えるようにしています。
複数人で作業するときも、誰のスタイルかわかりやすくなるので開発がスムーズですね。
スタイルシートの追加方法
独自のスタイルシートを仮にstyle-name.cssとします。これをテーマのディレクトリに保存します。そして、header.phpの<head>タグ内に、下記のように記述すれば読み込んでくれます。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-name.css" type="text/css" />
子テーマにスタイルシートを追加する方法
子テーマのディレクトリに、style-name.cssを保存し、子テーマのheader.phpの<head>タグの中に、下記を記述します。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style-name.css" type="text/css" />
記事のまとめ
WordPressのデザインをカスタマイズする方法の例を、ご紹介させていただきました。WordPressには、沢山のphpやcssファイルが使用されています。はじめは、どこをいじって良いのかわかりにくいのですが、今回紹介させていただいたような方法で見ていくと、わかりやすいのではないかと思います。
今日も訪問してくださり、本当にありがとうございます!