WordPressテーマTwenty Fourteenのカスタマイズ
2014年のデフォルトテーマでは、おしゃれで現代的なレスポンシブデザインのマガジンスタイル・サイトを作ることができます。お気に入りのホームページコンテンツをグリッドまたはスライダー形式でおすすめしましょう。3つのウィジェットエリアを使ってサイトをカスタマイズしたり、全幅ページテンプレートや執筆者を表示できる参加者ページでコンテンツのレイアウトを変えてみたりしてみませんか。WordPress でマガジンサイトを作るのが今までになく簡単になりました。
WordPress.org | Twenty Fourteen |
有効インストール | 80,000+ |
WordPressバージョン | 3.6 |
PHPバージョン | 5.2.4以降 |
Twenty Fourteenのテーマカスタマイザー
サイト基本情報 | サイトのタイトル キャッチフレーズ |
色 | サイト名の色 背景色 |
ヘッダー画像 | 1260 x 240 px 推奨 |
背景画像 | 画像を選択 |
メニュー | 2か所 トップメインメニュー 左サイドバーメニュー |
ウィジェット | メインサイドバー コンテンツサイドバー フッターウィジェットエリア |
おすすめコンテンツ | おすすめコンテンツをグリッドかスライダーで表示が可能 |
テーマのカスタマイズ
テーマをカスタマイズするには、大きく分けて機能面とデザイン面をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート(PHP)ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。
css(スタイルシート)でカスタマイズ
部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss(スタイルシート)を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。
ブロックエディタ対応のテーマではブロックごとにタイポグラフィ(「文字や文章を読みやすく、または美しく見せるための技術」)を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。
注意点)スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。
テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。
css(スタイルシート)を追加するには、ダッシュボードの 外観 → カスタマイズ → 追加css と進みコードを追加します。スタイルシートを適用させるには編集ブロックに 高度な設定で 「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。
ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ を有効にしておくと、ページごとに スタイルシートを追加することができます。
テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。
テンプレートファイル(PHP)でカスタマイズ
テンプレートファイル(テーマファイル)のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。
- スタイル(style.css)
- テーマの関数
- 404テンプレート
- コメント
- テーマフッター
- テーマヘッダー
- 検索フォーム
- 単一テンプレート
テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。
子テーマを作成する
テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。
*子テーマとは
「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。
子テーマは単独で動作するのではなく、親テーマと連動して機能します。そのため子テーマはカスタマイズをするソース(ファイル)だけで構成します。ただし、functions.php と style.css は親テーマと連動させるために必須となっています。
- functions.php
- style.css
これらのソースの記述内容は決まっているので準じて記述しなければなりません。
■子テーマはPC上で作成しアップロード
子テーマの作成作業はPC上で行います。作業は比較的簡単で、知識のある方なら数分で完了するのではないでしょうか。そして、完成した子テーマは、WordPress管理画面(ダッシュボード)のテーマからインストール(アップロード)すれば利用できるようになります。
■子テーマ作成手順と作業内容
子テーマは以下の手順で作業します。
【1.】子テーマフォルダを作成
【2.】Style.css を記述する
【3.】functions.php を記述する
【4.】子テーマフォルダを圧縮する
【5.】WordPressにアップロードする
■作業内容
【1.】Windowsパソコンでディスクトップ等に、子テーマフォルダを作成します。フォルダ名は XXXX-child とわかりやすい名前にします。
【2.】Style.css を記述します。メモ帳などのテキストエディタを使います。テキストエディタを開いたら下記のコードを記述もしくはコピー&ペーストしてください。
/*
Theme Name:xxxxx child
Theme URI:
Description:WordPressテーマ「xxxxx」の自作子テーマです。
Template:XXXX
Author:xxxx
Author URI:https://xxxxx.com/
Version:0.0.8
*/
xxxx の部分を変更します。Template: と Author URI: は子テーマを採用するサイトの内容にあわせます。完了したら先ほど作成した子テーマフォルダに保存します。
スタイルシートを追記したい場合は、子テーマの カスタマイズ → 追加css で記述できます。
【3.】functions.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' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
内容は変更する必要がないので、完了したら先ほど作成した子テーマフォルダに保存します。
※カスタマイズコードは子テーマを有効化し 外観 → テーマファイルエディター を使って追記します。
【4.】子テーマフォルダを圧縮する
WordPressにアップロードするために、子テーマーフォルダーを圧縮します。フォルダを右クリックし、送る → 圧縮(zip形式)フォルダ でディストップに圧縮ファイルが生成されます。
【5.】WordPressにアップロードする
WordPressにログインし 外観 → テーマ → 新しいテーマ → テーマのアップロードと進みます。
「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます。」と表示されるので、ディストップの圧縮フォルダをアップロードして子テーマをインストール、有効化すれば使用できるようになります。
最終作業として、子テーマで表示されるか確認をします。ブラウザの新規タブを開くか、他のブラウザを開いて目的のURLで開きましょう。このときWordPressの管理画面を開いておけば、万一表示されない場合にもテーマを親手テーマに戻せることが可能なことが多いです。
■トラブルが発生したら
表示されない原因の多くに Style.css の記述ミスが挙げられます。例えば2バイト文字で記述したり、Template: を間違って記述したりでしょうか。
管理画面から親テーマに戻せるようなら、一度戻して、作成した子テーマフォルダをPCで修正しましょう。
表示はされるが崩れてしまう場合もあるようです。テーマが有料テーマや無料で配布されているテーマの場合は配布元のサイトで確認をしてください。
WordPressのカスタマイズ手順
WordPressをカスタマイズするには下記の手順で行うとよいでしょう。
- WEBサイトの構成を考える (※注1)
- 不要な機能を削除する
- 必要な拡張機能(プラグイン)を追加する
- グローバルナビゲーションやサイドメニューを作る
- TOPページを作る
- 企業サイトなどは、会社案内や事業内容などを作る
- お知らせや、ブログ(製品やサービスをカテゴリーに構成する)を設置する
※ 注1)固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。
レンタルサーバーのバックアップ
エラーによって不測の事態に陥ってしまった場合、やはり安心なのはレンタルサーのバックアップ機能です。レンタルサーバーによっては高機能なバックアップが装備され毎日自動でバックアップしてくれるものもあります。
ロリポップ!
![]() |
自動バックアップ・無料 |
ConoHa WING
![]() |
自動バックアップ期間14日間 |
リトルサーバー
![]() |
バックアップ期間7日間 |
WordPress最適化SSDサーバー
![]() |
自動バックアップ |
KAGOYA のWordPress専用サーバー
![]() |
指定したスケジュールでバックアップ |
さくらのレンタルサーバ
![]() |
8世代の自動バックアップ |
※サービス内容は変更されることがありますので、公式サイトで確認してください。
※この記事はプロモーションが含まれています。
◆有料テーマは最初からデザインやレイアウトが完成されています。カスタマイズせずほぼそのままの状態で使えるので、サイト運営で最も重要な仕事であるコンテンツ作成に集中できます。トップページのレイアウトやコンテンツを自由自在に調整できたり、サイト全体のデザインやSEOを一括設定できたりと、高度なサイト作成機能が搭載されているのも有料テーマのメリットの一つです。
THE THOR
ザ・トールは、圧倒的に美しくおしゃれなテーマです。ランキングサイト・口コミサイトやおしゃれで美しいデザイナーズサイトが簡単に作れます。アクセスUP、収益UPを強力に後押しする「集客・収益化支援システム」が搭載されていて、コーポレートサイトやビジネス用メディアブログ、ブロガー・アフィリエイターなどの利用に適しています。
賢威
賢威はSEO実績が多く、SEOマニュアルや購入者専用の会員サイトでSEOの学習ができるのは大きなメリットなるでしょう。
Emanon
Emanonは、個人事業主・中小企業のビジネスサイト、オウンドメディアに必要なWeb集客機能と自由度の高いレイアウト機能を搭載した有料WordPressテーマです。見込み客を増やすためにメルマガ登録や資料請求、セミナーに誘導する仕組みがあり、WebサイトをWordPressで作りたい個人事業主・中小企業におすすめです。
LIQUID PRESS
WordPress公式有料サポートテーマに登録されているテーマです。 公式レビューやテーマチェックをクリア済のため、安心して利用できます。レスポンシブWebデザインにプラス、ユーザーがPC/スマホ表示を切り替えできる、 アクセシビリティと一貫性を確保することができるオリジナル機能を持っています。また、ウィジェット等の直感的な編集で、初心者でも簡単にカスタマイズ可能。
STORK19
ブロガー専用のWordPressテーマ「OPENCAGE」 モバイルファースト思想でつくられたブロガー専用のWordPressテーマです。 ウィジェットやカスタマイザーを利用して簡単にオリジナルデザインのブログを 構築することができます。