2020年7月20日更新

マナブログコピーでフッターをカスタマイズする方法

Thumbnail

今回はマナブさんが制作したWordPressテーマ manablog_copy（マナブログコピー） でフッターをカスタマイズする方法について紹介したいと思います。

今回紹介する内容はこちら????

今回紹介するカスタマイズ

  • フッターのプロフィール文を変更する方法
  • フッターに表示されるTwitterのタイムラインを変更する方法
  • フッターのメニューを変更する方法
  • フッターのタイトルを変更する方法
  • コピーライトを変更する方法
  • Twitterのタイムラインを非表示にする方法

では早速見ていきましょう！

管理画面の設定

まずはテーマファイルを編集せずに設定できる内容から紹介したいと思います。

プロフィール文を変更する

マナブログコピーのプロフィール文はmblog管理という設定ページから変更することができます。


管理画面サイドバーの上の方にある「mblog管理」をクリックします。


「プロフィール文」の入力欄を編集します。


これでプロフィールの文章を変更することができました！

Twitterのタイムラインを変更する

Twitterのタイムラインについても、mblog管理のページで自分のTwitterアカウントに変更することができます。


「フッターTwitterIDの設定」と書かれた入力欄に、TwitterIDを入力して保存すれば、、


この部分がお使いのTwitterアカウントのタイムラインに変わるはずです！

冬眠明けのクマ冬眠明けのクマ

Twitterのタイムラインもmblog管理のページで設定できるよ。

フッターのメニューを変更する

フッターのメニューについても見ていきましょう。フッターのメニューは管理画面のメニューの設定ページから変更することができます。


管理画面サイドバーの 外観 > メニュー をクリックするとメニューの設定画面に移動します。


表示したいメニューを選択して「フッターポートフォリオ」にチェックを入れます。


これでメニューが変更されました！

テーマファイルのカスタマイズ

ここからは、テーマファイルを編集するカスタマイズ方法について見ていきましょう。

PHPファイルを編集するときは注意
PHPファイルの編集時にエラーが起きるとサイトが動かなくなる場合があるので、注意して編集するようにしてください。

マナブログコピーの子テーマを作ってカスタマイズする方法については、こちらの記事で紹介しています。

マナブログコピーの子テーマを作る方法とテーマが認識されない場合に試したいこと【WordPress】

フッターのタイトルを変更する

まずはフッターのタイトルを変更する方法から見ていきましょう。

冬眠明けのクマ冬眠明けのクマ

「About me!」や「Portfolio」って書かれた部分を変更するよ。

マナブログコピーのテーマファイルにあるfooter.phpの31行目付近や44行目付近、68行目付近に<h4>タグがあると思いますが、このh4タグの中に書かれた文字がフッターのタイトルとして表示されます。

たとえば「About me!」を「このサイトについて」とするには、次のように編集すれば大丈夫です。

HTML
コピーする
<!-- これを ↓ -->
<h4>About me!</h4>
<!-- このように編集 ↓ -->
<h4>このサイトについて</h4>

WordPressの管理画面からテーマファイルを編集するときは？

マナブログコピーのテーマファイルを管理画面から編集する方法についても紹介したいと思います。


管理画面サイドバーの外観 > テーマエディター をクリックします。


右側のサイドバーに「テーマフッター」と書かれたファイルをクリックします。これでfooter.phpを編集することができます。

温厚なライオン温厚なライオン

PHPではドット(.)やはてな(?)のような記号を消してしまうと、エラーになりやすいので注意しないとだよ。

コピーライト部分を変更する

では、コピーライト部分を変更する方法について見ていきましょう。

コピーライトのコードはfooter.phpファイルの78行目付近に書かれています。

たとえばMinimalの部分をWebCraftLogにして年号を2020年にするには、次のようなコードになります。

HTML
コピーする
<!-- これを ↓ -->
<p class="col-xs-12 text-center">Copyright - <a href="https://manablog.org/">Minimal</a>, 2019 All Rights Reserved.</p>
<!-- このように編集 ↓ -->
<p class="col-xs-12 text-center">Copyright - <a href="https://webcraftlog.net/">WebCraftLog</a>, 2020 All Rights Reserved.</p>

Twitterのタイムラインを表示したくないときには？

さいごにTwitterのタイムラインを非表示にする方法についても見ていきたいと思います。


このタイムラインを表示しないようにする方法です。

フッターのタイムラインについてのコードはfooter.phpの71行目付近に書かれているので、これを削除すればタイムラインを非表示にすることができます。

HTML
コピーする
<!-- これを削除 ↓ -->
<a class="twitter-timeline" height="570" href="https://twitter.com/<?php echo $twitter_id_footer; ?>?ref_src=twsrc%5Etfw">Tweets by <?php echo $twitter_id_footer; ?> </a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.