うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooTシャツトリニティなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめの映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や陰気な話も書きます)。

辛気臭い歌を歌ったりもしています(配信ストア

//padding-left

本ページはプロモーションが含まれています。

WordPressテーマ「マテリアル」のカスタマイズ方法5つ【更新日を表示、スマホのメニューを最初から開いておく等】

time 更新日:  time 公開日:2017/06/22

ブログ用WordPressテーマ マテリアル
ブログ用WordPressテーマ マテリアル

このブログでは、「WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】」という記事で紹介させて頂いた「マテリアル」というテーマを使用しています。

「マテリアル」はそのままで機能も見た目も申し分ないテーマなのですが、このブログでは少しカスタマイズをしています。
この記事ではそのマテリアルのカスタマイズ方法を備忘録がてらいくつかご紹介しようと思います。

注意
  • 下記のいずれについても子テーマのテンプレートファイルを変更してください。
  • 必ずバックアップファイルをとっておいてください。
  • 「ver.2.13.0」の記述をもとにしています。バージョンアップにより行数などが変更される可能性があります。
  • カスタマイズは自己責任でお願い致します。

記事上(公開日の横)に更新日を表示

WordPressテーマ「マテリアル」更新日を記事上に表示する

デフォルトでは公開日しか表示されないのですが、記事を更新した場合は公開日の横に更新日を表示するようにカスタマイズしました。

single.php」の6行目に、

<span class="lsf">time </span><?php the_time('Y/m/d') ?>

というコードがあります。それを削除して、代わりに以下のコードをコピペします。

スマホでグローバルメニューをはじめから開いている状態に

WordPressテーマ「マテリアル」スマホのメニューを最初から開いておく

デフォルトでは、スマホの場合、グローバルメニューが「MENU」と表示されていて、それをクリックするとメニューが現れる仕様なのですが、最初から開いておくようにカスタマイズしました。

上記のコードを「style.css」に追加します。

「MENU」の文字を変更する

上記の変更をしても、メニューの上に「MENU」の文字がそのまま残っています。この「MENU」をクリックするとメニューを閉じることができるのですが、そのままだと分かりにくいかと思いまして、「MENU」の文字を変更することにしました。

header.php」の170行目に「MENU」の文字があるので、それを任意の文字に変更します。このブログでは「メニューを閉じる」としました。

このブログのようにボタン風に表示するには、CSSに以下を追加して、

header.php170行目の「MENU」の文字を以下のように書き換えます。

カテゴリー(子カテゴリーも)とタグを記事下に表示

WordPressテーマ「マテリアル」カテゴリー(子カテゴリーも)とタグを記事下に表示する

デフォルトでは記事上(公開日の下)にカテゴリーが表示されるようになっているのですが、記事下に表示させるようにカスタマイズしました。
また、親カテゴリだけでなく子カテゴリも表示、その下にタグがあればタグを表示するようにしています。

single.php」の22行目に、

<?php the_content() ?>

という記述があるので、その下に以下のコードを追加します。

記事上(公開日の下)のカテゴリーを削除する

上記のカスタマイズを行ったことと、またすぐ上にパンくずリストもあるので、このブログでは公開日の下にあるカテゴリーの表示は削除することにしました。

single.php」の8、9行目に、

<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>

という記述があるので、それを削除します。

ブログの説明文にリンクを貼る

WordPressテーマ「マテリアル」サイトの説明文にリンクを貼る

外観⇒カスタマイズ⇒サイト基本情報⇒キャッチフレーズ」に文章を書くと、ブログタイトル下にブログの説明文として表示されるのですが、その文章中にリンクを貼りたかったので、ヘッダーに直接記入することにしました。

header.php」の164、165行目に、

<?php if(is_desc()){ ?><p class="site-desc"><?php bloginfo("description") ?></p><?php } ?>

という記述があるので、それを削除して、代わりに、

こんな感じで直接説明文を書きます。

カテゴリーごとの記事の表示をフッターに移動

ページ下部のカテゴリー

記事の下の方にあるカテゴリーごとの記事の表示をフッターに移動するカスタマイズです(スマホで見た時にサイドバーを先に表示させたかったので)。
これはちょっと面倒くさいです。

style.css

style.css」に上記のコードを追加します。

footer.php

footer.php」を上記に書き換えます。

注意

このカスタマイズのついでに、フッターの背景色をsubカラーからmainカラーに変更しています(subカラーだとHOMETOPに戻るボタンと同じ色になってしまうので)。

もしも元のsubカラーの方がよければ、1行目の「main-color-background」を、「sub-color-background」に書き換えてください。

cat_lists.php

cat_lists.php」を上記に書き換えます。

右側が余るので、カテゴリータグを表示するようにしています。

single.php

single.php」の182行目に、

<?php get_template_part("cat_lists") ?>

という記述があるので、それを削除します。


他にもちょこちょこいじっているのですが、説明が煩雑になりそうなので、とりあえず以上のものをご紹介してみました。

この記事がこれから「マテリアル」を使用する方や、既に使用している方のお役に立ちましたら幸いです。