現在地: トップページ » WordPress » WordPressのデザインをカスタマイズする方法!SEOにも効果的

WordPressのデザインをカスタマイズする方法!SEOにも効果的

この投稿では、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の子テーマを作る(だけ)の手順!
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
WordPressのサイドバーを、固定ページ、アーカイブ、ブログ毎に分けたい時ありますよね!そのような時、ウィジェットに新しくサイドバーを追加/登録する方法をご紹介します!・・・

独自のスタイルシートの追加/読込

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ファイルが使用されています。はじめは、どこをいじって良いのかわかりにくいのですが、今回紹介させていただいたような方法で見ていくと、わかりやすいのではないかと思います。
今日も訪問してくださり、本当にありがとうございます!


飛騨高山で畑を耕しながら、フリーランスのWebデザイナーとして活動しています。自然や文化に触れながら、人を癒し和ませるデザインを追求しています!文章作成、イラスト作成、写真撮影やパソコン作業全般が得意で大好きです。工業高校→工業大学で機械や電気の勉強をしていましたが、これからは自然の時代!と思い、自然の中で楽しく元気に暮らし続けることを目標に頑張っています。スピリチュアル大好き。最先端は苦手。時事問題も苦手。新聞は好きです。12年間乗ったクラウンからCAST SPORTへ乗り換え。Mac,iPad,GRATINA 4G(au/京セラ),NIKON COOLPIX P6000,D7200使い。ヘンプアクセサリー作りが趣味。

コメントを残す

メールアドレスが公開されることはありません。