[実践編 Level 20.] WordPress(ワードプレス)|テーマ「Sydney(シドニー)」のセットアップ④ フッターのカスタマイズ設定

トップページで欠かせないのがフッターの設定だ。

現状では、メニュー表記やコピーライトの部分などがデフォルトのままなので、きちんと設定をしておこう

このレベルでは、フッターのカスタマイズ設定を攻略していく。

Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:

https://www.dammy.wordpress-quest.com/

※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。
基本的にデモサイトのカスマイズは、
当サイトで記載してある方法以外は使っていない。

フッターの表記を変更しよう

Sydneyの場合、フッターはなにも変更していないと下記のような表示になっているはずだ。

フッターの表記を変更するには、フッターのPHPファイルを書き換える必要がある。

PHPの編集はダッシュボードから可能だが、子テーマを設定している場合、フッターのPHPファイルを親テーマからコピーする必要がある。

ただ、「Level 11.」で攻略した、子テーマ作成プラグイン「Child Theme Configurator」を使用している場合は、ワンクリックでコピーが可能だ。

Child Theme Configurator」の使い方は、下記の記事を参考にしてほしい。

関連記事

テーマをインストールしたら、次は「子テーマ」を作成しよう。WordPress(ワードプレス)には「子テーマ」という概念があり、テーマのカスタマイズは主にこの「子テーマ」を使ってやっていく。このレベルでは、子テーマ[…]

まずは、現在設定している子テーマにどんなファイルが入っているか確認してみよう。

ダッシュボード」→「外観」→「テーマエディタ」を選択する。

「Child Theme Configurator」で子テーマを作成した際に、とくにファイルを追加していない場合は、下記のような内容になるはずだ。

一番右上で編集するテーマを選べる。

その下には、選択されたテーマに存在するファイル一覧が並んでいるはずだ。

今回はここにフッターのPHPファイルを追加して編集してみよう。

フッターのPHPファイルを子テーマにコピーしよう

フッターのPHPファイルをコピーする方は2通りある。
1つはプラグインを使ってコピーする方法。
もう1つは、FTPクライントソフトを使ってコピーする方法だ。
先ずは、一番簡単なプラグイン「Child Theme Configurator」を使ってファイルをコピーしてみよう。
ここでは、「Level 11.」の攻略を済ませた前提で進めていく。
もし別の方法で子テーマを作成してしまっていた場合の動作は確認していないが、その場合は、「Child Theme Configurator」の設定画面から既存の子テーマを「Analyze」にかけて問題がないかチェックすることをオススメする。
「Child Theme Configurator」がインストールされた状態で、「ダッシュボード」→「ツール」→「Child Themes」と進む。
「Child Theme Configurator」の設定画面が表示されたら、先ずは左上の「Currently loaded:」が「Sydney Child」になっているか確認しよう。
次に、下の「CONFIGURE an existing Child Theme(既存の子テーマを編集する)」が選択されていることを確認したら、上のメニュータブから「Files」をクリックしよう。

「Files」では、子テーマにどのファイルをコピーするか選択できる。

ここでは、「footer.php」にチェックを入れて下の「Copy Selected Child Theme」をクリックしてファイルをコピーしよう。

子テーマにファイルをコピーするのは、テーマのアップデートの影響を受けないのようにするためだ。親テーマのフッターPHPに直接編集してしまうと、アップデートした際に編集した箇所が消えてしまうので、影響受けたくない編集は必ず子テーマのファイルでおこなうようにしよう。
テーマエディタに戻って、先ほどコピーした「footer.php」のファイルが追加されていればOKだ。

FTPクライアントを使ったコピー方法

もし、何らかの理由でプラグインが使用できない場合は、FTPクライアントを使ってファイルをコピーすることも可能だ。

ここでは「Cyberduck」を例に攻略を進めていこうと思う。

「Cyberduck」の使い方は下記を参考にしてほしい。

関連記事

サーバーとWordPress(ワードプレス)のセキュリティ設定が完了したら、次はサイト制作を始める前に予め設定しておきたい項目を紹介しよう。ここでは、サイトアドレスの変更方法について攻略していく。サイトアドレスとWordpressア[…]

「Cyberduck」でサーバーにアクセスしたら、Wordpress(ワードプレス)のテーマがインストールされているフォルダを探そう。

もし、Wordpressを「WP」というフォルダにインストールした場合、下記のように進んでみよう:

public_html(ConoHa Wingの場合)」→「サイトドメイン名」→「wp-content」→「themes」→「sydney(テーマのフォルダ)」

テーマのフォルダの中に、「footer.php」のファイルがあるのでそれをダウンロードしよう(ダウンロードは右クリックから可能)。

次に、ダウンロードした「footer.php」を今度は子テーマのフォルダにアップロードする。

フォルダのパスは親テーマとほぼ一緒だ。

public_html(ConoHa Wingの場合)」→「サイトドメイン名」→「wp-content」→「themes」→「sydney-child(子テーマのフォルダ)」
アップロード先は「sydney-child」フォルダの直下でOKだ。
アップロードしたら先ほどの、テーマエディターでファイルが表示されるか確認しよう。

「footer.php」を編集しよう

テーマエディターから先ほどコピーした「footer.php」を開こう。
WAFなどを設定している場合、テーマエディターでPHPを編集しようとするとエラーが出て編集できない場合が多々ある。
エラーが出てしまう場合は、FTPでダウンロードしたファイルを編集してからアップロードしよう。
デフォルトでは下記のようなコードになっているはずだ。

編集する箇所は下記の24行目〜26行目のコードになる。

<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, ‘sydney’ ) ); ?>”><?php printf( __( ‘Proudly powered by %s’, ‘sydney’ ), ‘WordPress’ ); ?></a>
<span class=”sep”> | </span>
<?php printf( __( ‘Theme: %2$s by %1$s.’, ‘sydney’ ), ‘aThemes’, ‘<a href=”https://athemes.com/theme/sydney” rel=”designer”>Sydney</a>’ ); ?>
この状態で表示される文字列:
「Proudly powered by WordPress | テーマ: Sydney by aThemes.」

これを下記のように変更する:
「© Copyright 2019 WORDPRESS QUEST|初心者冒険者のワードプレス攻略サイト」

変更するためのコードは下記の通りだ。
<p><?php
echo “© Copyright 2019 WORDPRESS QUEST|初心者冒険者のワードプレス攻略サイト”;
?></p>
ここでは、PHPコードで文字を表示させるために「echo」というタグを使っている。
編集後のコードは下記の通りだ。

編集を保存すると、下記のようにフッターの表記が変わるはずだ。

さらに改行の仕方も攻略しておこう。

PHPで改行を指定するには、HTMLと同じで「<br />」タグを使う。

ただし、PHPとHTMLでは少し表記の仕方が違うので気をつけよう。

現状の表記は一列:
「© Copyright 2019 WORDPRESS QUEST|初心者冒険者のワードプレス攻略サイト」

これを下記のように3列に変更する:
「© Copyright 2019
WORDPRESS QUEST
初心者冒険者のワードプレス攻略サイト」

記載するコードは下記の通りだ。
<p><?php
echo “© Copyright 2019<br />”;
echo “WORDPRESS QUEST<br />”;
echo “初心者冒険者のワードプレス攻略サイト”;
?></p>
改行したい行の先頭に毎回「echo」を表記すること以外はHTMLとあまり変わりはない。
編集が成功した場合は、下記のように表記が3列になるかと思う。

ちなみに、サイト名にサイトURLのリンクを貼りたい場合は下記のようなコードになる:

<p><?php
echo “© Copyright 2019<br />”;
echo “<a href=\”https://www.wordpress-quest.com/\”>WORDPRESS QUEST</a> \n <br />”;
echo “初心者冒険者のワードプレス攻略サイト”;
?></p>
少し独特なコード表記なので間違えないように気をつけよう。

カスタマイザーで見た目を整えよう

今度は表記をセンター揃えにして少し見た目を変えてみよう。

フッターをカスタマイズするには、カスタマイザーの「追加CSS」から可能だ。

CSSの詳しい使い方は[Level 19.]で攻略済みだ。

関連記事

トップページのコンテンツが埋まってきたところで、ここでさらにワンランク上のレイアウト調整をやってみよう。ここでは、カスタマイザーやElementorでは調整できない部分をCSS(スタイルシート)を使ってカスタマイズする方法を攻略していく。[…]

SydneyでフッターのCSSをカスタマイズするには、「.site-footer」のタグを使って指定する。

先ずはフッターの表記をセンター揃えにしてみよう。

CSSの入力欄に下記のコードを記入しよう:

.site-footer {
text-align: center;
}
すると表記がセンター揃えになるはずだ。
行間とサイズをさらに整えてみよう。
.site-footer {
text-align: center;
font-size: 0.8em;
line-height: 2.1
}
行間と文字の大きさを調整したことでスッキリとした見た目になるはずだ。

フッターの配色を変更しよう

続いてフッターの色を調整したいと思う。

フッターの色を変えるにはカスタマイザーから設定可能だ。

「フッターの背景」ではフッターの背景色「フッター色」は文字の色が変更可能だ。

ウィジェットはまだ設置していないのでここでは触らなくてOKだ。

 フッターの表記を変えるにはPHPファイル(footer.php)を書き換えよう
 PHPファイルは親テーマから子テーマへコピーしたファイルを編集しよう
 フッターの配色はカスタマイザーから変更しよう
以上でフッターのカスタマイズ設定が完了した。
初見だと、フッター表記の変更はPHPファイルを編集するので少し敷居が高いかもしれないが、コード表記さえ間違えなければ大丈夫だ。
では、冒険者諸君、GOOD QUEST !!