MH Magazine Liteのカスタマイズ方法とおすすめプラグイン

うおおおおお!!!

ようやくブログのテーマ変更がひと段落しましたがどうでしょうか?

少しは雑多だった当ブログも見やすくなったのではないでしょうか?

今回はLuxeritasからMH Magazine Liteにテーマ変更して大変だった話などをしたいと思います。これから同テーマをイチから使う方も参考にして下さい。(移行というよりむしろゼロからの設定なので)

※修正後一発目の記事なので言葉遣いも自然と上品になりますね!

Luxeritasをやめようと思ったきっかけ

当ブログでも長年Luxeritas様に大変お世話になっておりました。

しかしずーっと見て見ぬフリしてた問題点が2つありました。

  • なぜか自動広告が外せない
  • トップページをカテゴリ別に分けたい

という2点です。

問題1:なぜか自動広告が外せない

結論から言うとこれはLuxeritasのせいではないです。

以前に色々なテーマを使ってたんですけど、どっかでいじった設定が引き継がれてLuxeritasのファイルを色々見て回っても自動広告のコードが見つからなかったんですよね。

詳しい方なら自分で探せるんでしょうが、なにせプログラミングとか何も分かんないんで 笑

で、Cocoonとかその辺のやつを使おうとか思ったんですが、Cocoonは以前使って、変にいじったせいで謎のPHPエラーが出現して逃げるようにテーマを変更してまして(笑)。再びCocoonをインストールしてもエラーが出てたので「これは今まで使ったことないテーマを使わんとあかんな!」と。

問題2:トップページをカテゴリ別に表示したい

もう1つの問題として、このブログは雑記ブログで好き勝手書いてるんですけど、『HIPHOP』『仮想通貨』『旅行』みたいな、何の脈絡も無い記事が共存していて、読者の年齢層と関心がハッキリ分かれているので見やすくしたいなーと思ってました。

ぶっちゃけ自動広告云々はめんどくさいからそのままでもいっか!と思ってたんですけど、サイト内部の巡回率を上げるために「どう考えても、一目で分かるようにトップページをカテゴリ分けした方が読者は便利よなー」と。

一応Luxeritasでもサイトのトップページをカテゴリ別にしてるっぽい方が居たのですが・・・プログラミングが分からん俺にはサッパリでした 笑

参考記事:Luxeritas ルクセリタス3系フロントページでカテゴリー別新着記事表示

テーマ変更、カスタマイズ前に

大幅にカスタマイズする場合はあらかじめ『WP Maintenance Mode』というプラグインを使用して、ブログを『メンテナンス中』表示するようにしておくと良いです。ワンクリックだけなので超お手軽!

参考記事:【超手軽】ワードプレスでメンテナンス画面を表示するプラグイン「WP Maintenance Mode」の使い方

MH Magazine Lite

ってことで『トップページがカテゴリ別に表示できる無料テーマ』を探したところ、『MH Magazine Lite』に辿り着きました。

サクッ変更するつもりが・・・初期ページでは普通に新着順の縦一列!!

しかも今までLuxeritasで当たり前だと思ってた『テーマ独自の管理画面』で簡単にいじれない!!

ウィジェットにそれらしいのがあるけど、いじってもカテゴリ分けできん!!

MH Mgazine Liteのカスタマイズ編

カスタマイズで特にお世話になったブログが下記のサイト。(めちゃくちゃ助かりました!)

参考サイト:Like a Magazine ♫ MH Magazine Lite (ver.2) カスタマイズ① – 基本編

こんな事言うと怒られるかもしれないですが、最初は「画像無くて分かんねーよ!!」と思ってたんですけど、ちゃんと文字を読みながらそれ通りに進めて行けばちゃんとできました 笑

基本的なカスタマイズは上記のサイトを見る事で解決すると思います。

トップページをカテゴリ別に表示する方法

上記のリンク先に書いてあるのですが、最初につまづいたので補足。

MH Magazine Liteでトップページをカテゴリ別に表示したい場合は

  • 管理画面から固定ページを新規作成する※中身は空でいい
  • ページ作成の際に右下にある『テンプレート』を『Homepage』にしておく
  • ウィジェットに移動して、任意の場所に『MH Custom Posts』を追加していく

という流れです。

後述するけど、プラグインを入れたので見た目はデフォルトではありませんが、大事なのは赤丸の部分です。
このサイトの場合はこんな感じで設定しています。

サイドバーについて

次にサイドバーについてですが、デフォルトでは何かしら英語表記されていますが、心配ご無用。「ウィジェット追加してくれ」と言ってるだけです。

トップページで表示されるサイドバーは『HOME 6』それ以外のページでサイドバーに表示したい項目は『Sidebar』にぶち込めばOK

投稿者情報を消したい!

なぜかデフォルトでは、記事上部に投稿者の名前、記事の下部に投稿者情報が記載されてしまいます

複数の投稿者がいる場合は良いかもしれませんが、このブログには不要なので消します。

このコードを『外観』-『追加CSS』にコピペするだけです。

参考記事:wordpress MH magazineの投稿ページなどの作成者を非表示にする方法教えてください。

ページ下部の投稿者情報については、管理画面『ユーザー』 – 『あなたのプロフィール』に『プロフィール情報』を記載してるいせいだと思いますので、ここを消すとたぶん消えます。

アイキャッチの設定

Luxeritasではたしかデフォルトではアイキャッチが記事内に表示されない仕様だったと思います。たぶん・・・

とにかくMH Magazine Liteに変更する前の俺のブログではアイキャッチが記事内で表示されてなかったのですが、MH Magazine Liteではアイキャッチが自動で記事内にデカデカと表示されます!!

これを全部手動で削除していったのですが、1時間以上掛かった!!

なので、もともとアイキャッチを記事内で表示させていない人は下記の記事を参考に、アイキャッチ表示を消すと良いでしょう!!(作業後に発見した・・・)

参考記事:MH Magazine liteでアイキャッチ画像を個別投稿ページで非表示にさせる方法 [ブログ]

MH Magazine Liteに入れたプラグイン

Luxeritasから変更してからプラグインまみれになりました。今までどれだけLuxeritasに助けられていたのか痛感しました 笑

相性だったり、できるだけ軽いプラグイン探すのに苦労しました。

順不同で紹介していますので、各自必要なものだけ使用して下さい。一応MH Magazine Liteに導入した理由や困ったことなどは下記に書いておきます。

ALL IN ONE SEO PACK

最近は無料テーマでもSNSシェアの画像を自動で設定してくれるものがほとんどですが、MH Magazine Liteには設定項目が無かったのと、アナリティクスやサーチコンソールのIDを入れるところが無かったので、全て一括で設定できる『ALL IN ONE SEO PACK』を導入しました。

ちなみにもともと『Google XLM Site Maps』を利用していたのですが、SNSのシェアボタン以外は『ALL IN ONE SEO PACK』を利用しています。

唯一メンドくさかったのは、SNSでシェアした時の記事画像を個別に1つずつ手動設定しなければいけないこと。

アナリティクスなどの参考記事:【All in One SEO Pack】10分でできるSEOの設定方法

サイトマップの参考記事:WordPress – All in One SEO Pack – XMLサイトマップの設定方法

Twitterカードの参考記事:「All in one SEO pack」でTwitterカードを簡単に設定する方法

SNS関係のプラグイン

SNS関係はトップページのTwitterフォローとRSSフォロー用に『Social Media Widget』を導入し、記事のシェア用に『AddToAny Share Buttons』を導入しました。

それぞれ設定が簡単という事と、『AddToAny Share Buttons』については『はてなブックマーク』があるという理由で使っています。

Social Media Widgetの参考記事:WordPressのサイドバーにシンプルなSNS&feedlyフォローボタンを作成する方法

AddToAny Share Buttonsの参考記事:AddToAny Share Buttons – 100以上のSNSのシェアボタンを表示できるWordPressプラグイン

目次関係のプラグイン

目次のプラグインに関してはデフォルトでいじらなくてもオシャレな『Easy Table of Contents』を導入しています。こちらも特に難しい設定は不要です。

参考記事:自動的に見出しを目次にしてくれるプラグインEasy Table of Contents

人気記事ランキングのプラグイン

人気記事ランキングのプラグインとしては『WordPress Popular Posts』が簡単なのですが、『Simple GA Ranking』の方がめちゃくちゃ軽いのでおすすめです!ただし、解説してあるサイトの多くが古いのか、解説で貼られている画像と自分の表示されている画像が違って設定に時間が掛かりました。

参考サイト:軽量で正確!「Simple GA Ranking」でAnalyticsから人気ランキングをブログに設置しよう

上記記事で、僕と同じように「OAuth 同意画面」らへんの表示が画像と違う人は、とりあえずサイト名を記入して、自分のブログのドメインを入力して、手動で認証情報に行けばなんとかなると思います(どうなってもいいや!思って適当にやった結果成功しただけなので詳しくは覚えてませんが、たしかサイト名とドメインぐらいしか入力してなかったように思います 笑)

お問い合わせ関係のプラグイン

これはもう有名な『Contact Form 7』を使っちゃいましょう。

参考記事:ContactForm7にreCAPTCHA v3を設定する

上記の設定をするとスパムメールが激減しますが、サイトの右下に常にreCAPTCHAのマークが表示されて鬱陶しいのにで、下記の記事を参考に消しちゃいましょう。簡単です。

参考記事:reCAPTCHA v3のプライバシー・利用規約のマークを消す方法

サムネイルを揃えるプラグイン

MH Magazine Liteは自動でサムネイルの大きさを揃えてくれませんので、『Regenerate Thumbnails』というプラグインでサムネイルの大きさを調節しました。

一旦サムネイルを適正化した後はプラグインを削除しても良いそうなので是非!

※これ下記の設定をしても綺麗に表示されない場合は別の画像プラグインが悪さをしている恐れがあるので一度切ってみましょう。

参考記事:サムネイルをリサイズして幅と高さをキレイにそろえる方法

Googleアドセンスのプラグイン

自動広告はサイトのレイアウトが崩れるものの、毎回手動で挿入するが面倒だったので『Advanced Ads』を導入しました。どうやら自動広告はめちゃくちゃサイトスピードが遅くなるっぽいです。

参考記事:Advanced Ads – 広告コードを様々な場所に表示できるWordPressプラグイン

サイト高速化プラグイン

サイト速度を上げるために『a3 Lazy Load』を導入しました。

不要かもしれません(後述の追記を参照してください)

参考サイト:画像の遅延読込でサイトを高速化してくれるプラグイン「a3 Lazy Load」

PageSpeed Insightsの結果

これだけプラグインを入れて不安だったのですが『PageSpeed Insights』の測定結果。

ぬおおおお!めちゃくちゃ上がっとる!前まで赤色だった文字がようやくオレンジに!!

まぁしかし読まれてない記事を50記事ぐらい削除した結果(どんだけ無駄な記事書いてたんや・・・)かもしれません。

試しに他のブログでも自動広告を外したところ20点ぐらいスコア上昇しました。

しかし、『Think with Google』では

Japan, 4G ネットワークでのお客様のサイトの速度は 4.4 秒です. 判定:遅い

って言われた・・・・なんでやねーん!

『PageSpeed Insights』でもっと下のスコアのブログは『Think with Google』 の判定では普通って表示されたり、もうよく分からん!気にしない!!笑

追記) 『a3 Lazy Load』のプラグインをオフにしたら『PageSpeed Insights』のスコアが4点下がったけど、『Think with Google』 は遅いから平均に改善されました・・・わけわからん!! 

その他オススメの追加CSSなど

サイトデザインでオススメの追加CSSのサイトをご紹介します。

囲い枠→【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

Amazon,楽天アフィリエイトのデザイン→ 収益増加!カエレバより綺麗なアフィリエイトリンクをコピペで設定

Youtubeをたくさん貼り付けている方は下記の記事を参考にすると良いです。記事内のトップにコードを貼り付けるだけ。

参考記事:【WordPress】Youtubeを埋め込みの高速化テクニック【プラグインなし】

これで完了!!

ってことで、全部調べながらやっていたので結果的に2日ぐらい掛かりました。

この記事書いてる間にもちょくちょくプラグイン入れたり消したりしてました 笑

それぞれ参考サイト頂いた記事の作成者の方々ほんとありがとうございます!

とりあえずはこれでひと段落!!このまま不具合が出ないことを願うばかりです 笑

Be the first to comment

Leave a Reply

Your email address will not be published.


*


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)