最終更新日: 2019/07/12

【初心者向け】ワードプレスカスタマイズについて全て解説します!!

ブログや自分のホームページを運営し始めると、ここをもうちょっとこうしたいな、ここに画像を入れたいな。など、カスタマイズしたい願望が出てきますよね。

ただ、ワードプレスのカスタマイズは難しいいんじゃないかと考えている初心者の方も多いはず。この記事ではそんな方のためにカスタマイズの入り口となる解説を網羅しました。

カスタマイズを始めるときのお役に立てれば幸いです。

1 はじめに
2 カスタマイズをする前に整理しよう
3 テーマ機能を使ってのカスタマイズ
4 カスタマイズが簡単で且つ便利なプラグイン10選
5 プログラミングによるカスタマイズ
6 ワードプレスカスタマイズのまとめ

はじめに

本記事ではワードプレスのカスタマイズ方法について解説していきます。

ワードプレスの場合、「カスタマイズ」という言葉には2つのパターンが存在しているかと考えています。

基本機能とテーマが提供している機能を使ってのカスタマイズ
HTML、CSS、PHPなどのプログラミングを使ったカスタマイズ

今回はその両方を紹介しますので、ご自身が作りたいWEBサイト構築に役立てて頂ければと思います。

カスタマイズをする前に整理しよう

ワードプレスでカスタマイズ（テーマ機能を利用したカスタマイズ、プログラミングによるカスタマイズ）をする前に、どんなデザインにしたいのか？どんな項目や機能がほしいのか？を絵に書いてみましょう。

いきなりカスタマイズに入るより頭の中がすっきりします。書き出すことでイメージが付くので、そして目標とするデザインが明確になります。大学ノートやスケッチブック、Excelでもかまいません。頭の中を整理することが目的です。

テーマ機能を使ってのカスタマイズ

カスタマイズの流れ

簡単にテーマを使ったカスタマイズの流れを説明します。これが必ず正しい、という訳ではありませんので、参考程度にして頂けたらと思います。

【1】デザインに近しいテーマを探す

カスタマイズに時間がかかってしまうことを避けるために、自分がイメージしているデザインとなるべく近しいテーマを探しましょう。実装したい機能がテーマに備わっているかどうかも大事ですが、こちらはプラグインで補完できるかと思います。

HTMLやCSSの勉強をしながらサイトを作りたいという方は、無料でシンプルなテーマをチョイスするのが良いです。カスタマイズの勉強になります。

逆に執筆に専念して早く収益をあげたいという方は有料のテーマが良いです。デザイン性はもちろん、SEO対策が良く設計されたサイトが短い時間で作成できます。

WordPressのテーマについてもっと知りたい方は抜群のコスパ！ワードプレスでおすすめの日本語有料テーマ18選とワードプレスでビジネス向けなテーマの選び方とテンプレート20選をご覧ください。

【2】プラグインを探す

プラグインは拡張機能です。なので、デザインや見た目を操作するプラグインもあるかと思いますが、そちらはテーマに任せて、プラグインでは機能を探しましょう。

例えば、お問い合わせ機能、SEO対策機能などです。プラグインもGoogle検索で「ワードプレス　プラグイン　○○○○」などで検索するとおすすめのプラグインがたくさん出来てきます。〇〇〇〇の箇所に欲しい機能の単語を入れましょう。例えば、「ワードプレス　プラグイン　お問い合わせ」などです。

本サイトでもいくつかのプラグインを紹介していますので、参考にして頂けたらと思います。

10分で理解できる!!ワードプレスを10項目で徹底解説します!!

【3】子テーマを作る

子テーマを作ります。
子テーマについては下記の項目を参照ください。

子テーマの使い方

【4】テーマの設定をする

テーマをご自身のワードプレスにインストールして設定を開始します。テーマによってはやや難しいものもありますが、ドキュメントやGoogle検索等で情報収集しながら設定していきます。

日本語での情報量が少ないとこの段階で少々つまづくことがありますので、なるべく情報量が多いテーマを採用しましょう。

【5】プラグインの設定

　プラグインも同様です。人気でよく利用されているプラグインは情報が豊富です。「ワードプレス　プラグイン　〇〇〇〇」で検索して情報収集しましょう。

【6】検証と修正を繰り返す

作成したWEBサイトを開いて、設定した全ての箇所の見た目と動作をを検証します。

動作や見た目が意図しないようであったら該当の箇所を確認したりインターネットで情報検索します。テーマの仕様上、設定ではどうしようもない場合はCSSやPHPを使ってカスタマイズします。

以上がおおまかな流れです。

カスタマイズが簡単なテーマ10選

初心者でも簡単に設定ができるテーマを集めてみました。テーマ選択の参考にして頂けたらと思います。

有料テーマ

AFFINGER 5 （WING）

稼ぐサイトの設計図-AFFINGER5（WING）

アフィリエイト、ブログに特化したSEOに強いテーマ「AFFINGER」

テーマ内には豊富な機能が存在し、様々なカスタマイズ、SEO施策がコーディング無しで設定できます。キャッチコピー通り、「稼ぐ」にフォーカスしたテーマです。

また、企業のコーポレートサイトも作れるようなデザインになっており、様々な用途で利用できる万能なテーマです。

開発元：株式会社オンスピード
価格：14,800円(税込)
主な用途：ブログ、アフィリエイト

AFFINGERの詳細を見る

Grazioso

Grazioso(グラツィオーソ)

1カラムデザインで美しさとインパクトがある有料テーマ「Grazioso」。

ハイクオリティな企業のコーポレートサイトを作成するのに適しているテーマではないでしょうか。ワンカラムデザインのトップページで、企業の魅力をストーリー仕立てでアピールできるようになっています。

ウィジェット背景に動画を埋め込むことができるなど、デザインと印象にこだわったテーマとなっています。

開発元：株式会社テンパーセント
価格：19,800円(税込)
主な用途：ホームページ

Graziosoの詳細を見る

無料テーマ

Twenty Seventeen

WordPress.orgの2017年公式テーマ。1ページで全体を伝えるランディングページ風になっていて、スマートデバイスを意識した作りです。

トップページの大きな画像が特徴的、また、デフォルトのフォントがゴシック体になったのが大きな変更点です。

Simplicity

「内部SEO施策済みのシンプルな無料Wordpressテーマ」がキャッチコピーの国産テーマです。ブロガー、アフィリエイターの多くが利用しています。

シンプルでデザイン性は乏しいですが、運用やSEO対策に利用できる機能が豊富です。使いやすいため、本サイトでもこのテーマを採用しています。

OnePress

トップページでサイトの全体像を伝えることができるテーマです。動きある視覚効果も設定で入れることができるため、訪問者への訴求力が高い表現が可能です。

コーポレートサイトとしてもおすすめです。

Sydney

こちらも1ページで全体像を伝えることができるデザインのテーマです。OnePressより堅い印象があるため、よりコーポレートサイト向きなテーマとなっています。

Xeory

コンテンツマーケティングで有名なバス部さんが開発したテーマです。

フォントサイズや書体が考慮されていて読みやすく、また、ランディングページ作成機能などがあり、このテーマでWEBマーケティングが出来るような作りとなっています。

Chocolat

レスポンシブデザインのブログ用テーマです。シンプルでカスタマイズが簡単です。お菓子をイメージしたデザインが何とも可愛いらしく、見ているだけで楽しい気持ちになれますね。

Portfolio

ポートフォリオ用サイトで人気のテーマです。

トップページは大小様々なリンク画像用の枠が用意されており、センスあるデザインを演出しています。レスポンシブデザインで、スマホ表示も綺麗です。

BizVektor

人気のビジネスサイト用テーマです。

設定箇所が他のプラグインと比べて多いですが、逆に言うとテーマが提供するデザインと機能だけでかなりの完成まで近づけます。

カスタマイズが簡単で且つ便利なプラグイン10選

簡単で便利なプラグインもまとめてみました。参考にして頂けたらと思います。

Yoast SEO

内部SEO対策に便利なプラグインです。設定箇所が整理されていて分かりやすく、初心者におすすめです。

Akismet

スパムコメントを自動で判別してくれるプラグインです。コメントをオンにしてWEBサイトを運営する場合は必須のプラグインです。

WP Multibyte Patch

マルチバイト文字の取り扱いに関する不具合の修正と強化を実施しているプラグインです。このプラグインはワードプレスをインストールすると一緒にインストールされているプラグインのため、探してインストールする必要はありません。

MW WP Form

お問い合わせフォームが作れるプラグインです。送信前の確認画面があるのが特徴です。

EWWW Image Optimizer

アップロードした画像ファイルサイズを自動で軽くしてくれる人気のプラグインです。ただし、一部のレンタルサーバーと相性が悪いため、インストール後にエラーになることがあります。

Push7

購読ユーザーにプッシュ通知ができるプラグインです。一定の訪問者、読者が得られるようになってから利用すると良さそうです。

Q2W3 Fixed Widget

画面を下にスクロールしてもサイドバーのウィジェットが一緒についてきてくれるようになるプラグインです。ウィジェットに設定したお問い合わせやランディングページにリンクする画像などが追尾するようになると、確かに効果的ですね。

WordPress Related Posts

記事の下に関連記事を表示することが出来るプラグインです。訪問者に類似の興味ある情報を提示することが出来るため、サイトの滞在時間と回遊率を上げるきっかけになります。

WordPress Popular Posts

サイドバーに人気記事の一覧を表示することができます。人気の記事は多くの人が面白い！ためになった！と思える内容であるので、アピールすることでサイトの滞在時間と回遊率に貢献できそうですね。

PubSubHubbub

略してPuSHとも呼ばれています。機能を簡単に説明すると、インストールして有効化しておくだけでGoogleにインデックスされやすくなります。（詳しく説明すると長くなりそうですので）ただし、確実にGoogleへ通知したい場合はSearch ConsoleのFetch as Googleを利用しましょう。

こちらのページでもプラグインを紹介しています。合わせてご参照ください。

10分で理解できる!!ワードプレスを10項目で徹底解説します!!

プログラミングによるカスタマイズ

ワードプレスの基本構造について

CSSやPHPを使ってのカスタマイズに入る前に、ワードプレスの仕組みについて、基本だけ理解しておきましょう。

ワードプレスのシステム自体はPHPという言語でプログラムされています。

また、ブラウザに表示して見た目や動作を制御するHTML、CSS、Javascriptという言語があります。こちらは各テーマ毎に内容が違います。※テーマでもPHPを使っています。

ワードプレスの本体プログラムをカスタマイズすると、この先ずっと自分で保守していかなくてはならなくなってしまい、オープンソースソフトウェアの恩恵を受けることができなくなってしまいます。

なので、「ワードプレスをカスタマイズする」というのは、テーマを自分で開発するか、インストールしたテーマをベースにカスタマイズする、ということになります。

テンプレートファイルについて理解する

それでは、カスタマイズの対象であるテーマは中身はどのようになっているのでしょうか？

Twenty Seventeenの中身を覗いてみましょう。

PHPファイルとCSSファイル、それと画像ファイルがあります。これらがTwenty Seventeenのテーマを構成しています。

それでは、テーマを動かすための最小構成はどのようなものでしょうか？

下記の2つがワードプレスのテーマの最小構成になります。

index.php（テンプレートファイル）
style.css

参考：WordPress Codex テーマの作成-基本的なテンプレート

最小構成は2ファイルですが、Twenty Seventeenを見ると何やらファイルがたくさんあります。これには2種類のファイルが存在しています。

1つ目はページの一部となっているファイル群、もう1つはワードプレスで特別な意味を持つファイル群です。Twenty Seventeenを例に見てみましょう。

【ページの一部となっているファイル群】
・header.php
・sidebar.php
・footer.php
など

これらのファイルはマスターファイルから呼び出されるファイルで、ページのある部分を構成するファイルです。マスターファイルの中で、呼び出しを実行しています。

図解：基本的な構成

【ワードプレスで特別な意味を持つファイル群】
index.php
single.php
page.php
search.php
など

これらのファイルはワードプレスのシステムの仕様で予約されたファイルです。つまり動作が決められています。index.phpは必須ですが、そのほかのファイルは無しでも動作します。各々の役割を下記に簡単に説明しておきます。

index.php = WEBサイトのメインページで使用されるファイルです。
single.php = 投稿ページで使用されるファイルです。
page.php = 固定ページで使用されるファイルです。
search.php = 検索結果で使用されるファイルです。

簡単な例ですが、ある訪問者がhttp://ドメイン名/にアクセスしたときはindex.phpの中身がブラウザに表示されます。

上記の内容に基づくと、Twenty Seventeenのトップページは以下のような構造になっています。

テンプレートファイルをカスタマイズする

それでは、Twenty Seventeenのテンプレートファイル内を見ならがカスタマイズしてみましょう。

【index.php】

下記の画像を記事一覧の前に入れたい場合

画像のリンクを貼るコードをindex.phpに追加します。

トップページに画像が表示されます。

※どこに何を書けば良いか分からない場合は、あたりをつけて文章（「あいうえお」など何でも構いません）を入れてみましょう。ページのどの位置に対応しているかが理解できます。

もう一つ、footer.phpをカスタマイズしてみましょう。

下記のfooterのサイト情報を変更したいとします。

footer.phpを開きます。

さらに別のファイルを呼び出しているようです。

ファイルに記述のあったtemplate-partsフォルダのfooterフォルダのsite-info.phpファイルを開きます。

中身を確認すると、footerに記載されている文字がありました。

現在書かれている内容をコメントアウトして、下の行に表示したい内容を書き込みます。これを保存してアップロードするとfooterのサイト情報が変更されます。

更新されていることが確認できました。

子テーマを使う

前項ではテーマ内のテンプレートファイルを直接編集しましたが、直接編集するとテーマのアップデートがあった場合ファイルが編集したテンプレートファイルが上書きされる可能性があります。

そのような不都合に対応するために、ワードプレスは子テーマという機能を持っています。

子テーマは既存テーマを親テーマとみなし、親テーマ内で編集したいテンプレートファイルだけを別フォルダにコピーし、別フォルダ側で管理します。そうすることで、親テーマ（既存テーマ）にアップデートがあったとしても、影響を受けることがありません。

ワードプレスは、まず子テーマフォルダ内にあるファイルを先に見に行きます。その後に親テーマフォルダ内のファイルを見に行きます。

この仕組みのため、子テーマと親テーマに同名のファイルがあったら子テーマの方が画面に表示されます。

子テーマの作り方

子テーマの作り方は簡単です。

FTPツールでサーバーにアクセスし、themesフォルダの中に新しいフォルダを1つ作成します。twentyseventeenの子テーマであればtwentyseventeen-childなどでよいでしょう。

フォルダ内にstyle.cssというファイルを作ります。

ファイルを開いて下記のコードを記述し、保存します。

/*
Template:Twenty Seventeen
Theme Name:Twenty Seventeen Child
*/

フォルダ内にfunction.phpというファイルを作ります。

ファイルを開いて下記のコードを記述し、保存します。

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 
    function theme_enqueue_styles() 
    { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 
} ?>

ワードプレス管理画面の外観　＞　テーマ　を開くと作成した子テーマが表示されています。

有効化します。

最後に、作成しているWEBサイトを開いて異常がないか確認します。

子テーマが作成できたので、あとはこのフォルダ内にテンプレートファイルをコピーしてカスタマイズします。

※Simplicityやbizvektorは子テーマ用のテーマが配布されています。テーマで子テーマが配布されている場合はそちらを利用しましょう。

Simplicity：Simplicity2の子テーマ
bizvektor：高度なカスタマイズの仕様

ワードプレスカスタマイズで利用される言語について

ワードプレスでよく利用される言語について簡単に解説しておきます。

プログラミング言語の解説、使い方、サンプルコードはインターネット上での情報量が豊富です。やりたいことはGoogle検索すると大抵の情報が取得できるかと思います。

どうしても不明な箇所はIT、WEB関係のコミュニティサイトで質問すると回答が返ってくるかと思います。

HTML

Hyper Text Markup Languageの略です。ブラウザに表示する内容をタグを使って構造化します。基本構造は下記のようになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        ブラウザに表示される箇所
    </body>
</html>

例えば、h1～h6は見出し、pは段落、などのようにタグごとに用途が決まっています。このタグを記述して、文章を構造化することが主な役割です。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

<p>文章の1かたまり（段落）</p>
<p>文章の1かたまり（段落）</p>

CSS

Cascading Style Sheetsの略です。CSSはHTMLで構造化された文章などのスタイルを指定します。

文字サイズを大きくしたり、画像の周りを赤線で囲ったりすることができます。HTML内でもCSSを記述することができますが、現在はCSSとHTMLは分けて管理することが推奨されています。

ワードプレスではstyle.cssファイルがCSSの基本ファイルです。

CSSの例、文字サイズを指定したい場合

h1{
font-size:36px; //h1タグで囲まれている文字サイズを36pxにする
}

p{
font-size:16px; //pタグで囲まれている文字サイズを16pxにする
}

PHP

PHP: Hypertext Preprocessorの略で、元はPersonal Home Pageに由来しているようです。オープンソースのスクリプト言語で、HTML内でも記述が可能です。サーバーサイドで実行され、データベースから値を取ってきたり、格納したりできます。そのような特性から、WEBサービス開発などでよく使われている言語です。

JavaScript

ブラウザ上の内容（文字や画像）に動作、視覚効果を付けることができます。こちらもHTML上で記述することが可能ですが、.jsというファイルを作り、HTMLから呼び出す方法が多いかと思います。

例：現在時刻を表示

<script>
var now = new Date();
document.write("現在は" + now + "です。");
</script>

カスタマイズが前提のテーマ3選

自分でテーマを作りたい！と思っても一から作るのは大変です。そんなときはカスタマイズを前提としたテーマを利用するとよいかもしれません。ブランクワードプレステーマなどと呼ばれています。

BlankSlate

WEBデザイナーや開発者がサイト構築しやすいように、クリーンで且つ必要最小限な機能のみで構築されたテーマです。初期状態の画面を見ると、本当にブランクな状態です。フルカスタマイズしたい人向けのテーマですね。

HTML5 Blank WordPress Theme

HTML5を使ってつくられているブランクテーマです。英語ですがダウンロードサイトでコミュニティに気軽に質問できるようですね。

Naked WordPress

Naked、直訳すると「裸の」WordPressです。すでにカスタムメニュー、ウィジェット、レスポンシブ対応がなされているため、サイトの機能開発に集中できそうです。

ワードプレスのプログラミングに関する書籍3選

ワードプレスは基盤が出来上がっているので、初心者がプログラミングを学習するには最適な環境の1つであると思います。ここでは、プログラミング関連の書籍を3つほど載せておきます。

WordPressユーザーのためのPHP入門はじめから、ていねいに。[第2版]

著者：水野史土
出版社：エムディエヌコーポレーション
発売日：2017/3/28

Kindle版で探す

Amazon書籍で探す

タイトル通り、ワードプレスで開発するにあたってのPHP入門書の第2版、ワードプレスの仕様に沿ってPHPの使い方が学習できます。

WordPress Web開発逆引きレシピ WordPress4.x/PHP7対応

著者：藤本壱
出版社：翔泳社
発売日：2016/3/16

Kindle版で探す

Amazon書籍で探す

カスタマイズ時にやりたいこと、困ったことの解決方法が分からないときに重宝するTips集。逆引き辞典は1冊あると便利かもしれません。

WordPress　仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

著者：中島真洋
出版社：技術評論社
発売日：2015/6/23

Kindle版で探す

Amazon書籍で探す

WEBデザイナー向けのワードプレスの教科書。ワードプレスの仕様からHTMLの組み方、PHPでの開発方法が横断的に学べます。

カスタマイズ参考記事11選

WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

下記サイトは閉鎖しました。

~~http://webdesignrecipes.com/wordpress-customize-with-template-files/~~

~~ワードプレスのテンプレートファイルについて大変よくまとめられているページです。読みながら実践するとさらに理解が深まると思います。~~

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

http://www.webcreatorbox.com/tech/wordpress-child-theme/

子テーマに関して理解が深められる記事。女性のWEBデザイナーさんが書かれており、ところどころ見られる手書きの絵もよい感じ、楽しみながら読めます。最初の方の段落はワードプレスの概要について書かれていますので、「子テーマを作ろう」から読むと良いかと思います。

ドットインストール

http://dotinstall.com/lessons/basic_wordpress

初心者向け動画プログラミング学習サイトで有名なドットインストールさんの動画も大変参考になります。動画は受動的に学習が出来るため、まずは全部見てみる、という方法もおすすめです。

超絶初心者のためのフロント入門（HTML、CSS、JavaScript）

http://qiita.com/shuntaro_tamura/items/c9b2fec0f3a9f7d1e987

HTML、CSS、JavaScriptが横断的に学べるサイト。いったん概要レベルで知りたいという場合におすすめのページです。

まずはここから！HTMLの書き方【初心者向け】

https://techacademy.jp/magazine/4808

TechacAdemyさんのメディアサイト。HTMLに関して優しく詳しく丁寧に解説されています。まずはHTMLについて学びたいという方に大変おすすめのページです。

スタイルシート（CSS）の基本的な書き方【初心者向け】

https://techacademy.jp/magazine/4872

こちらも上記と同様、TechacAdemyさんのメディアサイト。HTMLと同様、優しく詳しく丁寧に解説されています。

基礎から抑える！初心者のためのJavaScript入門

https://blog.codecamp.jp/javascript_intro

CodeCampさんのメディアサイト。初心者向けにJavaScriptの基本について簡潔に分かりやすくまとめています。説明に使われている画像も大変シンプルで見やすい。

未経験からのPHP入門！ゼロから始めるPHP講座

https://blog.codecamp.jp/php-introduction

こちらもCodeCampさんのメディアサイト。PHP学習のための目次ページです。上から順に進めていくと効率的な学習ができます。

初心者必見！WordPressで0からブログを作ってみよう！WordPressでテーマを作成しよう編

http://ichimaruni-design.com/2015/07/wordpress-wp/

タイトルの通り、ワードプレスのテーマを一から作るための手順を紹介しているサイト。手順通り進めていけば簡単なテーマが作成できます。

レンタルサーバーにテスト環境（使っていないドメイン）があれば「開発環境を作ろう」の項は飛ばしてよいかと思います。

WordPressテンプレートタグ集

https://webboy.jp/wordpress_tag/

よく利用するテンプレートタグをまとめてくれているページ。ブックマークしておくと便利かと思います。

WordPressのオリジナルテーマ作成フロー・基本マニュアル

http://kachibito.net/wordpress/theme-development-flow.html

Gachibito.netさんが、これでもかというほどの情報量と丁寧な手順でテーマ作成方法を教えてくれる記事。その文字数およそ36000文字。。すごいですね。一度はサイトを覗く価値ありです。

ワードプレスカスタマイズのまとめ

ワードプレスはテーマが提供している機能を設定するだけでかなりのカスタマイズが可能です。有料テーマを利用すれば設定のみで完成することもありますよ。

また、設定だけでは足りない、どうしても変更したい箇所がある場合はテンプレートファイルを編集することでカスタマイズが可能で、さらに、インターネット上の情報量が豊富なためやりたいことに関する情報は大抵手に入るかと思います。

オリジナリティの高いサイトを作り、サイト訪問者に覚えてもらえるサイトを目指しましょう！