CG・映像デザイナー技術ブログ

【WordPress】WordPressテーマ「SANGO」のカスタマイズまとめ

0

eyecatch-wordpress-sango-customize

Authorすいみん
こちらのCGメソッドの記事では「WordPressテーマ「SANGO」のカスタマイズまとめ」を紹介します!かなりニッチなネタばかりです!
この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

SANGOのスマホ用ナビドロワー(ハンバーガーメニュー)表示を改善する方法

SANGOのスマホ用ナビドロワー(ハンバーガーメニュー)ウィジェットにカテゴリーなどメニューをいれることがありますが、この表示が非常に不安定でうまく表示されないことで、回遊率が下がってしまう懸念があります。

安定した表示にするために、簡単なカスタマイズしてみました!

SANGOのスマホ用ナビドロワー(ハンバーガーメニュー)表示を改善する方法

FTPで親テーマから「nav-drawer.php」をダウンロードします。FTPの使い方は下記参考

/wp-content/themes/sango-theme/parts/header/nav-drawer.php
参考 【FileZillaの使い方】WordPressでFTPソフトを使おうサルワカ | サルでも分かる図解説明マガジン

・php部分の記述を「//」コメントアウト(コメントにする)

・HTMLの記述を#nav_drawerで囲う

<div id="nav_drawer">
</div>

コードの編集が終わったら子テーマへ親テーマと同じ箇所にアップロードしましょう!

/wp-content/themes/sango-theme-poripu/parts/header/nav-drawer.php

※子テーマに「parts」や「header」のフォルダがない場合は、自分で作成しましょう。親テーマと階層を添えろ得すことが重要です。

万が一エラーが出た場合は、あわてず、子テーマに上げた「nav-drawer.php」を削除すれば元に戻ります。

子テーマに「nav-drawer.php」をアップロード後、表示が問題なさそうであれば、最後にキャッシュプラグインを使用している場合はクリアしておきましょう!

SANGOのスマホ用ナビドロワー(ハンバーガーメニュー)表示を改善する方法まとめ

原因はSANGOのモバイルとPCの判定が微妙なようで、記述を消すことで安定するようになりました。

経過を見てみますが、もしPCで表示されてしまう場合は、CSSで表示非表示の細かい調整ができると思います。

SANGO+PORIPUでバイラル風アイキャッチにしたい

テーマをSANGO+PORIPUに変えたので、将来を見据えてバイラル風アイキャッチに変更してみたいと思い、検証してみました。

https://oldno07.com/poripu/eyecatch-viral/

[問題]いままのでアイキャッチは手動で設定していた

以前は、はてなブログで投稿していたので、現在も手動で冒頭に画像を添付してそこからアイキャッチを設定しています。

この状態だと記事タイトル下の自動表示にした時に問題が発生します。

アイキャッチの記事タイトル下の自動表示

はてなブログからWordpress以降後、デフォルトの状態だとアイキャッチ、1画像目とアイキャッチが2連続で表示されます。

ですので、カスタマイズ>詳細>記事のタイトル下にアイキャッチを表示しないにチェックを入れてました。

ブログ記事の1画像目を非表示にする方法

まず画像のパスははてなブログとwordpressが入り混じって、Search Regexなどで置換は難しい状況です。

ですので、functions.phpを使って、1画像目を非表示にします。

Code Snippetsの導入

functions.phpにコードを追加するので、リスクヘッジのためにCode Snippetsのプラグインを導入します。

入れ方は下記のサイトが参考になります。

https://netaone.com/wp/code-snippets/

1画像目を非表示にするコード

Snippets>Add Newから下記のコードを挿入します。

function remove_first_image ($content) {
if (!is_page() && !is_feed() && !is_home()){
$content = preg_replace("/<img[^>]+\>/i", "", $content, 1);
} return $content;
}
add_filter('the_content', 'remove_first_image');

以上で、全ての1画像目が非表示になります。

元に戻したい時はこのコードをOFFにすればOKです。Snippetsで安全安心に変更できます!

バイラル風アイキャッチの設定方法

まずアイキャッチが全く表示されてない状態になっているので

カスタマイズ>詳細>記事のタイトル下にアイキャッチを表示しないにチェックします。

あとはPORIPUのテーマを有効化している状態であれば、投稿編集から投稿属性>テンプレート>バイラル風アイキャッチを選択します。

以上で、バイラル風アイキャッチの表示になります。

まとめてテンプレートを変更する方法

ひとつひとつテンプレートの変更は面倒なので、カスタマイズします。

絞り込み検索にテンプレートで検索する項目を追加

Snippetsに下記のコードを追加します。これでテンプレートのソートができます。

https://qiita.com/ohuron/items/e29ace717acf41e346ef

一括テンプレート変更

  1. 投稿一覧画面から、変更したい記事をまとめて選択

  2. 編集>適用を押して、一括編集メニューがでたらテンプレートをバイラル風アイキャッチにします。

まとめです。
SANGOの適切なアイキャッチサイズは680px×390pxだそうなのでこれも考慮しバイラル風アイキャッチにできないか、今後検討したいと思います。

SANGOのモバイル表示で、左右ぐらつくのを直したい


@media (max-width: 768px) { .m-all { overflow-x: hidden; } }

SANGOのカテゴリーページを記事ページに変更したい

長いのでこちらにまとめました!

参考 【WordPress】カテゴリーページを記事ページ化するカスタマイズまとめ[SANGO] | CGメソッドCGメソッド

SANGOの関連記事広告のウィジェットの項目が表示されない

AdBlockいれてるとSANGOの関連記事広告のウィジェットの項目が表示されません。

以上、すいみん(@cg_method)でした!

0