WordPressのカスタマイズ　その1

2023.02.16

WordPressのテーマとして「Lightning」の無料版を選択しました。ページを作り始めてすぐに、デフォルトの状態だと作りたいイメージは出来ないとあらためて気がつきました。最初から少しのカスタマイズは覚悟していましたので慌てずにネットで使いたい機能にする方法を調べてみました。たくさんの方法があり悪戦苦闘しながらでも少しずつ前に進み始めました。Pro版（有料）であれば、機能がたくさん付いているので楽にページ作成が出来ると思いつつ無料にこだわっていきます。

目次
  1. WordPressカスタマイズの方向性を考察
    1. 具体的なカスタマイズ方法３つ
    2. CSS
    3. PHP
    4. プラグイン
    5. カスタマイズ方法の優先順位
  2. 導入済プラグインについて
    1. この記事作成時点で導入しているプラグインは9個
    2. Lightningテーマ推奨プラグイン
  3. 追加CSSによるカスタマイズ
    1. CSSの編集を記述する方法は
    2. CSS編集を記述する場所は
    3. サイトタイトル横にロゴ画像を表示させる
    4. ページ最下部コピーライトの２行目を消す
    5. ページヘッダーの背景画像を設定する
    6. 個別ページ毎にページヘッダーの背景画像を設定する
    7. 今回実施したカスタマイズまとめ

WordPressカスタマイズの方向性を考察

具体的なカスタマイズ方法３つ

プログラミングの知識がない初心者がどうすれば思いどおりのページを作りことができるのか。具体的なカスタマイズ方法を調べてみました。
・1.CSSで編集
・2.PHPで編集
・3.プラグインを導入
以上の３つがあります。（他にもあるかもしれませんが、この３つでほぼ大丈夫かと）

CSS

CSS（Cascading Style Sheets　カスケーディング・スタイル・シート）
Webページのスタイルを指定するための言語です。サイト上のデザイン面を整えるために使用されています。誤った編集をするとページが表示されなくなってしまうなどのリスクがあります。

PHP

PHP（Hypertext Preprocessor　ハイパーテキスト プリプロセッサー）
サーバーで動的にウェブページを生成するためのスクリプト・プログラミング言語です。WordPress自体このPHPによって作成されています。サイトの見た目の他に機能面を追加したりする時に使用します。こちらも誤った編集をするとページが表示されなくなってしまうなどのリスクがあります。
WordPressは定期的に更新されており、テーマが更新された場合、自分で編集した内容が引き継がれません。その対処方法として「子テーマ」を用意してCSSやPHPを編集する時は「子テーマ」に対して編集するという方法があります。（子テーマについてはこちら）

プラグイン

上記２点は、自分でCSSやPHPを編集する必要がありますが、用意されているプラグインを利用することで、CSSやＰＨＰを編集することなく、機能を追加したりデザインを変更したり出来ます。
また、誤った編集をした場合のリスクを抑えながら、CSSの編集を簡単に行うことができるようになる（追加CSS）プラグインもあります。

カスタマイズ方法の優先順位

以上の内容を踏まえ、今後のカスタマイズの優先順位を以下のとおり決定しました。
・1.プラグインを導入
・2.プラグインによる追加CSSから編集
・3.CSS又はPHPを編集
できれば３番目のCSSやPHPによる編集は行いたくありません。

導入済プラグインについて

この記事作成時点で導入しているプラグインは9個

プラグインはとても便利なツールで利用しやすいのですが、入れすぎるとサイトの表示が遅くなったり、サイト自体に不具合が生じたり、セキュリティ上の問題が出たりしますので注意が必要です。
ホームページ開設後数週間で9個のプラグインを導入しました。出来ればこのあたりでプラグインの導入はストップしたいところです。

Noプラグイン名詳細備考
1VK All in One Expansion Unitさまざまな機能を備えた統合プラグインLightning推奨
2Contact Form 7お問合せフォーム作成
3Widget Optionsページ毎にウィジェットを表示、非表示が可能
4WPFront Scroll Topスクロールボタン表示
5Content Views記事一覧ページを作成する事が出来る
6Blocks Animationブロックのアニメーション化
7Arkhe Blocksアコーディオンブロック利用
8All in One SEOSEOの内部対策に関連する設定ができるSEO
9All-in-One WP MigrationWordPressを移行(引っ越し)できる

Lightningテーマ推奨プラグイン

Lightningテーマをインストールした時点でVK All in One Expansion Unitはテーマ推奨プラグインとして登録推奨されています。
VK All in One Expansion Unitを追加すると追加CSSからの編集が簡単に行えます。
次に、追加CSSを使った編集についてお話します。

追加CSSによるカスタマイズ

CSSの編集を記述する方法は

CSSの編集は、style.cssに内容コードを記述します。親のテーマファイルのCSSを書き換えるとアップデートで上書きされて消えてしまいます。子テーマファイルのCSSを書き換えると親テーマのアップデートでは消えないので子テーマのファイルを編集するのが一般的です。編集はstyle.cssに記述することになりますが、テキストエディタなどで直接記述していくので少し手間がかかります。同じテーマで複数のサイトを運営している場合などの時に、それぞれのサイトに対してCSSを書き換える手間が省けるという面では有効な方法です。親テーマや子テーマのファイルを直接編集する方法ではなく、導入したプラグインでWordPressから簡単に編集が出来る方法を取りました。

CSS編集を記述する場所は

今回CSSを記述する場所の説明です。WordPressのダッシュボードメニューの下の方にある「ExUnit」→「cssカスタマイズ」に記述します。ここに記述するケースは、サイト全体のスタイルを変更する場合です。個々のページスタイルのみを変更する場合は、個々の編集画面の下部にある「カスタムCSS」欄に記述します。「ExUnit」の「cssカスタマイズ」に記述したものと同じ箇所に対する記述があった場合はこちらに記述した内容が優先されます。
それでは、具体的なカスタマイズ方法の説明をしていきます。

サイトタイトル横にロゴ画像を表示させる

WordPressのダッシュボードメニュー「外観」→「カスタマズ」→「サイト基本情報」→「サイトタイトル」に入力したテキストがトップページのヘッダー部分に表示されます。
今回「株式会社ウィズ・ジー」と入力しましたが、表示されるのはテキストのみです。
その横にロゴが表示されるCSSを追加しました。

ウィズ・ジーサイトタイトル横のロゴ画像図

CSSコードは以下のとおりです。

/*サイトタイトル横にロゴ画像表示*/
.site-header-logo::before {
    content: ”;
    display: inline-block;
    width: 100px;
    height: 75px;
    background-image: url(画像のURL);
    background-size: cover;
    vertical-align: middle;
  margin-right: 10px;}

青字部分：PCで表示したいサイズ
赤字部分：画像のURLを記述する
モバイル表示サイズを指定する場合は以下のコードも追記します。

@media (max-width: 991.98px) {
  .site-header-logo::before {
    width: 60px;
　 height: 45px;
}}

青字部分：モバイルで表示したいサイズ

ページ最下部コピーライトの２行目を消す

ホームページの最下部にコピーライト表記があります。
デフォルトでは２行目に「Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology」と表示されます。
その表示を消すCSSを追記しました。

ウィズ・ジーサイトページ下のコピーライト表記図

CSSコードは以下のとおりです。

/*コピーライトの文字の一部を消すCSS*/
.site-footer-copyright p:nth-child(2) {
    display: none;}

ページヘッダーの背景画像を設定する

Lightningのカスタム設定でトップページにはスライドショーが配置出来ます。その他のページヘッダーには追加した固定ページのタイトルが表示されますが、背景はデフォルトで単色設定になっています。この背景に画像を表示させるようにしました。

ウィズ・ジーサイトヘッダーの背景画像の変更図

CSSコードは以下のとおりです。

/*固定ページのヘッダー画像を変更する*/
.page-header {
background-image:url(背景画像のURL);
}

赤字部分に背景画像のURLを記述する（以下同様）

ただし、個別ページ単位で同様のCSSを追加している場合は、そのCSSコードが優先されます。
したがって、個別ページの編集画面内でページヘッダーの背景画像を設定するための追加CSSコードを記述している場合は、ここで記述した内容は反映されません。

個別ページ毎にページヘッダーの背景画像を設定する

個別ページの編集画面でCSSコードを記述します。
CSSコードは以下のとおりです。

/* 固定ページごとにヘッダー画像を設定 */
.page .page-header {
background-image: url(背景画像のURL);
}

投稿ページに設定する場合は 最初の.page の部分を .single-post  と書き換えます。

スマホ閲覧時に別の背景画像を表示したい場合は以下の行も追加。

@media (max-width: 575.98px) {
.page .page-header {
    background-image: url(背景画像のURL);
}
}

今回実施したカスタマイズまとめ

今回は追加CSSによるカスタマイズで
1.サイトタイトルの横にロゴ画像を表示させる方法
2.ページ最下部コピーライトの２行目を消す方法
3.ページヘッダーの背景画像を設定する方法
4.個別ページ毎にページヘッダーの背景画像を設定する方法
をお話ししました。追加CSSによるカスタマイズは他にもたくさん施していますので次回お話しいたします。