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

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

たまに毒吐くちゃん

カテゴリー「WordPress」の人気記事TOP3

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

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

ブログ用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") ?>

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


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

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

スポンサーリンク

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

同じカテゴリーの記事

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

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

無料ワードプレステーマ「マテリアル」のカスタマイズ方法を載せています(更新日を表示、スマホのグローバルメニューを最初から開いておく、カテゴリーとタグを記事下に表示、サイト説明文にリンクを貼る、カテゴリーごとの記事の表示をフッターに移動する)。
Read More
【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ8個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ8個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「高速・多機能なテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。テーマを選ぶ決め手や注意点も書いています。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め25個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め25個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More