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

はじめに

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

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

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

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

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

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

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

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

カスタマイズの流れ

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

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

テーマの機能のみで対応する場合は、自分で描いた内容に近しいデザイン、やりたい機能がそろっているテーマを探しましょう。ワードプレスのおすすめテーマを紹介しているサイトは沢山あります。本サイトでも下記の記事で紹介していますので、参考にしてみて下さい。

人気のテーマは日本語での情報量も豊富ですので、なるべく人気のテーマ(情報量が多いテーマ)を利用するようにしましょう。

【2】プラグインを探す

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

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

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

【3】子テーマを作る

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

子テーマの使い方

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

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

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

【5】プラグインの設定

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

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

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

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

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

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

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

Twenty Seventeen

11-twenty-seventeen

WordPress.orgの2017年公式テーマ。1ページで全体を伝えるランディングページ風になっていて、スマートデバイスを意識した作りです。トップページの大きな画像が特徴的、また、デフォルトのフォントがゴシック体になったのが大きな変更点です。

Simplicity

simplicity

「内部SEO施策済みのシンプルな無料Wordpressテーマ」がキャッチコピーの国産テーマです。ブロガー、アフィリエイターの多くが利用しています。シンプルでデザイン性は乏しいですが、運用やSEO対策に利用できる機能が豊富です。使いやすいため、本サイトでもこのテーマを採用しています。

OnePress

onepress

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

Sydney

sydney

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

Xeory

xeory

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

Chocolat

chocolate

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

Portfolio

portfolio

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

BizVektor

bizvektor

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

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

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

Yoast SEO

Yoast SEO

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

Akismet

akismet

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

WP Multibyte Patch

wp-multibyte-patch

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

MW WP Form

mn-wp-form

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

EWWW Image Optimizer

ewww-image-optimizer

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

Push7

push7

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

Q2W3 Fixed Widget

q2w3-fixed-widget

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

WordPress Related Posts

wordpress-related-post

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

WordPress Popular Posts

wordpress-popular-post

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

PubSubHubbub

pubsubhubbub

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

こちらのページでもプラグインを紹介しています。合わせてご参照ください。
10分で理解できる!!ワードプレスを10項目で徹底解説します!!

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

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

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

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

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

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

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

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

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

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

twentyseventeenファイル群

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
など

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

図解:基本的な構成

810-wordpress-customize

【ワードプレスで特別な意味を持つファイル群】
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-structure

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

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

【index.php】

1-wordpress-customize

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

34-wordpress-custom-photo

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

5-wordpress-customize

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

35-wordpress-custom-photo

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

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

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

6-wordpress-customize

footer.phpを開きます。

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

7-wordpress-customize

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

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

8-wordpress-customize

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

9-wordpress-customize

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

10-wordpress-customize

子テーマを使う

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

そのような不都合に対応するために、ワードプレスは子テーマという機能を持っています。子テーマは既存テーマを親テーマとみなし、親テーマ内で編集したいテンプレートファイルだけを別フォルダにコピーし、別フォルダ側で管理します。そうすることで、親テーマ(既存テーマ)にアップデートがあったとしても、影響を受けることがありません。

ワードプレスは、まず子テーマフォルダ内にあるファイルを先に見に行きます。その後に親テーマフォルダ内のファイルを見に行きます。この仕組みのため、子テーマと親テーマに同名のファイルがあったら子テーマの方が画面に表示されます。

子テーマの作り方

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

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

28-wordpress-customize

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

29-wordpress-customize

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

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

30-wordpress-customize

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

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

有効化します。

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

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

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

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

ワードプレスでよく利用される言語について簡単に解説しておきます。プログラミング言語の解説、使い方、サンプルコードはインターネット上での情報量が豊富です。やりたいことは大抵Google検索すると情報が取得できるかと思います。どうしても不明な箇所はIT、WEB関係のコミュニティサイトで質問すると回答が返ってくるかと思います。

HTML

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

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

CSS

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

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

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

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

PHP

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

JavaScript

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

例:現在時刻を表示

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

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

BlankSlate

blankslate

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

HTML5 Blank WordPress Theme

html5blank-wordpress-theme

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

Naked WordPress

naked-wordpress

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

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

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

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

https://www.amazon.co.jp/dp/4844366580

wordpress-customize-book-1

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

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

http://www.shoeisha.co.jp/book/detail/9784798143774

902-wordpress-customize-book-1

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

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

http://gihyo.jp/book/2015/978-4-7741-7380-1

903-wordpress-customize-book-1

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文字。。すごいですね。一度はサイトを覗く価値ありです。