ごけたです。検索で見つけたページだけでトップページ同様、
フッターまで見てくれる方は極々僅かです。
目次
はじめに
WordPress Twenty Sixteen カスタマイズ その9
今回はフッター部分にある「サブテキスト」、
いわゆる「コピーライト」や「proudly powered by wordpress」についてです。
主に、非表示やコピーライトの変更、それに伴う色指定をやってみました。
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
テーマはTwenty Sixteen、OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。
事前準備
非表示にしたり、書き換えの設定は「footer.php」ファイルを使用します。
ファイルを直接変更するのは好ましくないので、
子テーマ用の「footer.php」ファイルを用意します。
親からダウンロードして子テーマ用フォルダにアップロードするだけす。
ダウンロードした「footer.php」ファイルの中身を子テーマフォルダ用に
「style.css」や「functions.php」のように書き換えることはありません。
ファイルを任意の場所にダウンロードします。
ここはデスクトップが無難です。
デスクトップのダウンロードした「footer.php」ファイルを
子テーマフォルダの「twenty sixteen-child」の中にアップロードします。
クリックします。
「テーマの編集」画面右列の「テーマファイル」の一番下に
「テーマヘッダー(headder.php)」が追加されているか確認します。
1:「サイトタイトル」や「Proudly powered by WordPress」を非表示にする
「サイトタイトル」や「Proudly powered by WordPress」と書いています。
個別に非表示することも、まとめて非表示することも可能です。
ここでまず個別に非表示しています。
1-1:「サイトタイトル」を非表示する
まずは「サイトタイトル」を非表示にするから始めてみます。
私の場合は「ご-け-た-ブログ」です。
1 | <span class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span> |
「サイトタイトル」のソースコードは
「footer.php」ファイルの54-55行目前後にあります。
※改行表示が出来ないので、横長表示になっています。
1 | <?php bloginfo( ‘name’ ); ?> |
サイトタイトルの前に
1 | <a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"> |
リンクが入力されていることで、フッターでもサイトタイトルをクリックすると、
トップページが表示される設定になっています。
こちらのソースコードをまるっと削除して、「テーマの編集」画面一番下の
「ファイルの更新」ボタンをクリックします。
「サイトタイトル」が非表示になったか確認します。
「Proudly powered by WordPress」が「サイトタイトル」が
あった位置にスライドして表示されています。
ここでは「サイトタイトル」が非表示の状態で進めます
1-2:「Proudly powered by WordPress」を非表示する
1 2 3 | <a href="<?php echo esc_url( __( ‘https://wordpress.org/’, ‘twentysixteen’ ) ); ?>" class="imprint"> <?php printf( __( ‘Proudly powered by %s’, ‘twentysixteen’ ), ‘WordPress’ ); ?> </a> |
続けて「footer.php」ファイルの60-62行目前後にあるソースコードを
まるっと削除して、「テーマの編集」画面一番下の
「ファイルの更新」ボタンをクリックします。
※改行表示が出来ないので、横長表示になっています。
1 | <a href="<?php echo esc_url( __( ‘https://wordpress.org/’, ‘twentysixteen’ ) ); ?>" |
が入力されていることで
「Proudly powered by WordPress」をクリックをすると
「Wordpress 日本語版」が表示されるリンク設定になっています。
「Proudly powered by WordPress」も非表示になり、
フッターに何も表示されていないことを確認してください。
ここでは「サイトタイトル」と「Proudly powered by WordPress」が
非表示の状態で進めます
1-3:「Proudly powered by WordPress」だけを非表示する
「1-1」、「1-2」と続けて設定したのでどちらも非表示なっています。
「サイトタイトル」を表示して、「Proudly powered by WordPress」だけを非表示する場合は、
1 | <span class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span> |
「1-1：サイトタイトル」で削除したのソースコードを
1 2 3 | do_action( ‘twentysixteen_credits’ ); ?> <span class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span> |
「footer.php」ファイルの48-49行目前後にある
ソースコードの下にコピペします。と言うか元に戻します。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
サイトを表示してサイトタイトルだけ表示されているか確認します。
PC上の親から同一ファイルと見比べながら行ってみてください。
こんな所でもバックアップは役立ちます。
表示確認すると最後に「/」(スラッシュ)が残っています。
1-4:サイトタイトルの後ろの「/」(スラッシュ)を非表示する その1
1 | <span class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span> |
内の「( home_url( ‘/’ ) ); ?>”」の「/」(スラッシュ)を削除したら
非表示なるかと思ったのですが非表示になりません。当然ですね。
「/」(スラッシュ)自体はマウスのカーソルを合わせてもリンク設定にはなっていません。
「footer.php」ファイルで該当するソースコードを見つけらません。
ここはGoogle Chromeの「検証」に頼ります。
1 2 3 4 5 6 7 | .site-footer .site-title:after { content: "\002f"; display: inline-block; font-family: Montserrat, sans-serif; opacity: 0.7; padding: 0 0.307692308em 0 0.538461538em; } |
「検証」で親の「style.css」の2448～2448行目前後のソースコードに反応しました。
もしやWebフォントの「content: “\002f”;」が「/」(スラッシュ)に該当している？
ということは「content: “\002f”;」を削除すればと思ったんですが、
これでも非表示なりませんでした。
「display:」の「inline-block;」を非表示の「none;」にしました。
display: inline-block;
font-family: Montserrat, sans-serif;
opacity: 0.7;
padding: 0 0.307692308em 0 0.538461538em;「display: inline-block;」以外のソースコードは削除が可能です。
ここでは削除しています。
1 2 3 4 | /* 1-4:「/」を非表示する */ .site-footer .site-title:after { display: none; } |
こちらのソースコードを「style.css」ファイルの一番下にコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
ここではソースコードの「/* 1-4:「/」を非表示する */」とタイトルを付けました。
「/」(スラッシュ)が非表示なり、サイトタイトルだけ表示されているか確認します。
ここでは「サイトタイトル」が表示され、「Proudly powered by WordPress」が
非表示の状態で進めます
1-5:サイトタイトルの後ろの「/」(スラッシュ)を非表示する その2
実は「/」(スラッシュ)を非表示するもっと簡単な方法があるんですが、
どうして非表示になるのか。今の私の知識量では説明は出来ません。
説明は出来ませんが設定方法だけは記載しておきます。
1 | <span class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span> |
「foooter.php」ファイル内のサイトタイトルのソースコードの
先頭の「＜span class=”site-title”＞」と最後尾の「＜/span＞」を削除します。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
たったこれだけでサイトタイトル後ろの「/」(スラッシュ)が非表示になります。
「span class」は何となく理解できるんですが、
削除することでどうして「/」(スラッシュ)が非表示になるのが理解出来ていません。
残念な状況です。
手っ取り早く「/」(スラッシュ)を非表示にするには現段階ではこちらがお薦めです。
1-6:サイトタイトルの後ろの「/」(スラッシュ)を非表示する その3
2018-08-07 追記
「/」(スラッシュ)をもっと簡単で正しく？説明できる非表示にする方法が
分かりましたので追記します。
「foooter.php」ファイル内のサイトタイトルのソースコードの
先頭の「＜span class=”site-title”＞」と最後尾の「＜/span＞」を削除します。は
無効にします。
先頭の「＜span class=”site-title”＞」と最後尾の「＜/span＞」がある状態に戻します。
1 2 3 4 5 6 7 | .site-footer .site-title:after { content: "\002f"; display: inline-block; font-family: Montserrat, sans-serif; opacity: 0.7; padding: 0 0.307692308em 0 0.538461538em; } |
その上で「1-4:」のGoogle Chromeの「検証」で見つけた親の「style.css」ファイルの
2448～2448行目前後のソースコードを使用します。
「0.7」を「0」に変更します。
1 2 3 4 | content: "\002f"; display: inline-block; font-family: Montserrat, sans-serif; padding: 0 0.307692308em 0 0.538461538em; |
今回の設定の関係ないソースコードは削除できます。
1 2 3 4 | /* 9:1-6:「/」を非表示する */ .site-footer .site-title:after { opacity: 0; } |
「opacity: 0;」にしたこちらのソースコードを
「style.css」ファイルにある「/* 1-4:「/」を非表示する */」と入れ替えます。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
ここではソースコードの上に
「/* 9:1-6:「/」を非表示する */」とタイトルを付けました。
サイトを表示してサイトタイトルの後ろの「/」(スラッシュ)が
非表示になっているか確認します。
「1-4:」の「display: none;」より今回の「opacity: 0;」の方が
新しいタグも覚えられて勉強になりました。
2:コピーライトを変更してみる
次は表示の文言自体を変更します。
1 | <span class="site-title"><a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a></span> |
ここでは1-3:の「サイトタイトル」が表示され、
「Proudly powered by WordPress」が非表示の状態で進めているので
上記のサイトタイトルのソースコードもまるっと削除して
正式なコピーライトのソースコードと入れ替えます。
1 | Copyright © 2017 <a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"><?php bloginfo( ‘name’ ); ?></a> All Rights Reserved. |
「正式なコピーライト」をソースコードで書きました。
こちらのソースコードをすでにあるソースコードを入れ替えます。
その前後にコピーライトの表記が追加されています。
※正式なコピーライトの表記は検索して初めて知りました。
サイトタイトルがあった箇所にコピペします。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。
「Copyright © 2017 「サイトタイトル」All Rights Reserved.」と
表示されていれば完了です。
1 | <a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" |
リンクが設定されているので、「サイトタイトル」にマウスのカーソルをあわせて
これまで通り文字の色が変更するかも念のため確認します。
3:コピーライトを中央に移動させる
今、左側に表示されているコピーライトを中央で表示させます。
1 2 3 4 5 6 | .site-info { color: #686868; font-size: 13px; font-size: 0.8125rem; line-height: 1.6153846154; } |
中央で表示させるソースコードは親の「style.css」ファイルの
2426-2431行目前後にあります。
フッター枠内の中央で表示させる「width: 100%;」と
文字を中央で表示させる「text-align: center;」を追加入力します。
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.6153846154;追加入力なので「width: 100%;」と「text-align: center;」以外の
ソースコードは削除が可能です。ここでは削除しています。
1 2 3 4 5 | /* 3:コピーライト中央寄せ */ .site-info { width: 100%; text-align: center; } |
こちらのソースコードはを「/* 1-3:「/」を非表示する */」の下にコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
ここではソースコードの上に「/* 3:コピーライト中央寄せ */」をタイトルを付けました。
コピーライトが中央に移動したか確認します。
スマホ画面サイズではスマホ画面サイズのフッター枠内での中央合わせなので、
改行して残った箇所だけが中央合わせでの表示のような感じになっています。
1 2 3 4 5 | /* 3:コピーライト中央寄せ */ .site-info { width: 100%; text-align: center; } |
中央合わせをやめる場合は、ソースコードをまるっと削除します。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
4:「その9」ここまでの「style.css」ファイルのソースコードを確認
1 2 3 4 | /* Theme Name: Twenty Sixteen Child Template: twentysixteen */ |
子テーマ用の「style.css」ファイルのソースコード。
1 2 3 4 5 6 7 8 9 10 | /* 1-3:「/」を非表示する */ .site-footer .site-title:after { display: none; text-align: center; } /* 3:コピーライト中央寄せ */ .site-info { width: 100%; |
今回は「footer.php」ファイル内でのカットやコピペが多かったので、
「その9」だけの「style.css」ファイル内のソースコードは2つだけです。
どちらも設定次第では不要になってしまいます。
さいごに
「/」(スラッシュ)の非表示方法は苦戦しました。
まさかのWebフォントとは思いませんでした。
それも苦手と言うか、理解するのをやめた設定方法が使用されていたので、
「display: none;」で非表示にならない場合は飛ばすつもりでした。
もう1つの「＜span class=”site-title”＞」と「＜/span＞」の削除は
「display: none;」の設定前に分かっていましたが、理解出来ていない。と言う、
恥ずかしい状況でこちらも飛ばす検討もしていました。どちらも半端です。
WordPress関連記事を検索した際にコピーライトを見ると
「All Rights Reserved.」を表記していない方も拝見します。
サイトタイトルが長い方もいらしゃいます。
PC画面サイズだけでなく、スマホ、タブレット画面サイズでも表示させて
コピーライトをどこまで表記するか検討するもの大切ですね。
最後までお合い下さいまして有難うございました。