WordPressテーマをカスタマイザーとcssでカスタマイズ【Lightning】

この記事はプロモーションが含まれています。

Lightning

Lightningをカスタマイズするにはテーマカスタマイザーを利用するか、同時に開発されている無料の多機能プラグイン「VK All in One Expansion Unit(通称:ExUnit)」を利用することが安全で近道だと思います。

今時のビジネスサイトやブログを作る上で必要な機能を網羅、併せて利用する事によって、コーポレートサイトやお店のホームページ、ブログなど簡単にカスタマイズする事ができます。WordPressテーマ・ディレクトリから利用できるテーマですがそのカスタマイズ性は秀逸と言えます。

WordPressテーマLightningのカスタマイズ

Lightning

WordPress標準では「投稿」「固定ページ」の2系統しか使えませんが、ExUnitの機能を使えば簡単に他の投稿系統(カスタム投稿タイプ)を増やせます。その場合もタイトルタグやパンくずリストなどは自動的に最適化され、更に各投稿タイプ用のサイドバーウィジェットエリアが自動で追加されるなどの機能を備えているので、投稿タイプに応じて自分でテンプレートファイルを作成しなくてもそのまま利用できます。

WordPress.orgLightning
バージョン15.20.2
有効インストール90,000+
WordPressバージョン5.9
PHPバージョン5.6.0
開発者サイトLightning | 無料で使えるWordPress公式ディレクトリ登録テーマ
推奨プラグイン VK All in One Expansion Unit
Lightning

WordPress標準では「投稿」「固定ページ」の2系統しか使えませんが、ExUnitの機能を使えば簡単に他の投稿系統(カスタム投稿タイプ)を増やせます。その場合もタイトルタグやパンくずリストなどは自動的に最適化され、更に各投稿タイプ用のサイドバーウィジェットエリアが自動で追加されるなどの機能を備えているので、投稿タイプに応じて自分でテンプレートファイルを作成しなくてもそのまま利用できます。

Lightning推奨プラグイン

情報の訴求力に力を入れている Lightning の特徴はテーマと同時開発されている無料の多機能プラグイン「VK All in One Expansion Unit(ExUnit)」、「VK Blocks」、「VK Block Pattern」をインストールすれば、ブログでアフィリエイトを運用する上で必要な機能を網羅させることができます。

【VK Block Patterns】

VK Block Patternsはブロックパターンを登録し記事に貼り付けることができるプラグインです。ブログで記事をかき続けていると同じような内容のコンテンツができることがあります。ページ毎にコンテンツを作成するのはちょっと面倒ですし、誤って記述してしまうこともあります。

【VK Blocks】

VK Blocks は Vektor,Inc. が提供する Gutenberg 機能拡張プラグインです。 Gutenberg には必要十分な編集機能がありますが、さらにページを豊かにしてくれます。

【VK All in one Expansion Unit】

VK All in one Expansion Unitは株式会社ベクトルが提供するテーマ Lightningから機能を分離されたものですが、他のテーマでも利用することができる統合型多機能プラグインです。

テーマカスタマイザー

Lightning のカスタマイズは大きく分けて機能とデザイン性になります。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。特にテーマのコードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

テーマカスタマイザーは、テーマによって内容は異なっていますが、基本的な項目、メニューや、ウィジェット、フォントや色、レイアウトなどを変更することができます。テーマによってはスライダーや動画に関する設定ができるものもあります。スタイルシートは追加CSSに必要なものだけ追加することができます。(全てのページに出力されるのであまり使わないCSSは追加しない方がページを軽くすることができる)

Lightning をカスタマイズする最も簡単な方法は、標準搭載されているカスタマイザーを使用することです。(ログインしている状態で)サイトを閲覧し、画面上部にある管理バー内の「カスタマイズ」をクリックするか、管理画面で、「外観」 > 「カスタマイズ」をクリックする方法です。Lightning のカスタマイザーの内容は以下のようになっています。カスタマイズ機能が豊富に用意されていて、テンプレートファイルをカスタマイズしなくてもよいほど充実しています。

サイト基本情報サイトのタイトル(WordPressで既に設定していれば変更の必要はなし
キャッチフレーズ
サイトアイコン 512 × 512pX
メニューLightningのメニューは以下の3つがデフォルト、位置はヘッダー部とフッター部の指定ができます。

HeaderNavigation
FooterNvigation
FooterSiteMap
ウィジェットLightningのウィジェットは豊富に用意されていてテンプレートファイルのカスタマイズをしなくてもデフォルトで十分利用できます。

サイドバー(トップページ)
サイドバー(共通上部)
サイドバー(共通下部)
トップページコンテンツエリア上部
フッター上部
フッターウィジェットエリア1
フッターウィジェットエリア2
フッターウィジェットエリア3
Lghtningデザイン設定 デザインスキンによって簡単にデザインを変更できる
280 x 60 のロゴ画像が使える
トップページを1カラムにする
トップページデフォルトの投稿リストや固定ページを表示しない
投稿詳細ページで最終更新日を表示しない
投稿詳細ページで投稿者名を表示しない
Lightningトップページスライドショー1900 × 600pxのスライド画像をスライドさせて表示することができる。
Lightningトップページ PR BlockトップページにPR したいページへのリンクと画像を簡単に設置できる。
Lightning のテーマカスタマイザー

WordPressテーマディレクトリのテーマは審査に適合しないと登録できないのでその点では安心して利用することができます。企業のサイトにも適したデザイン、コールツーアクションの実装、様々なニーズに対応できる公式テーマの一つといえるでしょう。

LightningをプラグインVK All in One Expansion Unit でカスタマイズ

VK All in One Expansion UnitをLightningにインストールして有効化すると以下のカスタマイズができるようになります。

テンプレートファイル(テーマファイル)のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

  • トップページにPR Blockを設置できる
  • ウィジェットエリアに会社情報やロゴを表示できる
  • 子ページを自動で一覧表示できる
  • お問い合わせ先情報を表示できる
  • コールツーアクションを一括挿入でき、ページごとに表示内容を変更できる

Lightningをカスタマイズするにはテーマカスタマイザーを利用するか、同時に開発されている無料の多機能プラグイン「VK All in One Expansion Unit(通称:ExUnit)」を利用することが安全で近道だと思います。

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のデザインテンプレートは、「テーマ」を有効化させることで構築されます。

子テーマの作り方
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をカスタマイズするには下記の手順で行うとよいでしょう。

  1. WEBサイトの構成を考える (※注1)
  2. 不要な機能を削除する
  3. 必要な拡張機能(プラグイン)を追加する
  4. グローバルナビゲーションやサイドメニューを作る
  5. TOPページを作る
  6. 企業サイトなどは、会社案内や事業内容などを作る
  7. お知らせや、ブログ(製品やサービスをカテゴリーに構成する)を設置する

※ 注1)固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。