WordPressテーマ「SANGO」のカスタマイズ

wordpress-sango-customize

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

目次

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

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

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

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

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

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

[sanko href=”https://saruwakakun.com/html-css/wordpress/filezilla” title=”【FileZillaの使い方】WordPressでFTPソフトを使おう” site=”サルワカ | サルでも分かる図解説明マガジン” target=”_blank” rel=”nofollow”]

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

・HTMLの記述を#nav_drawerで囲う

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

/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でヘッダーインフォメーションバーを追加するカスタマイズ

SANGOでヘッダーにインフォメーションバーを追加するカスタマイズです。

サイトのディスクリプションを見やすくしたり、関連リンクを追加することが可能です。

STEP

header-bar.phpの作成

下記のコードの内容のファイルを作成します。名前はheader-bar.phpとします。

サイトのディスクリプションとリンク先はお好みで入れましょう。

STEP

header.phpにコードを追加する

FTPで/wp-content/themes/sango/header.phpにあるheader.phpをダウンロード。
17行目に<?php get_template_part('parts/header/header-bar');を挿入

<body <?php body_class(); ?>>
<div id="container">
<header class="header<?php if(get_option('center_logo_checkbox')) echo ' header--center'; ?>">
<?php get_template_part('parts/header/header-bar'); // ←★headerバー ?>
<?php get_template_part('parts/header/nav-drawer'); // headerナビドロワー(モバイル) ?>
<?php get_template_part('parts/header/inner'); // headerタグの中身 ?>
</header>
<?php get_template_part('parts/header/info-bar'); // お知らせ欄 ?>

これで先程作成したheader-bar.phpがヘッダーから読み込まれます。

STEP

CSSを追加

最後に見た目を整えるCSSを追加します。

以上です。

SANGOでリンクをコピーボタンを付ける方法

シェアボタンの一覧にリンクコピーを追加します。

STEP

entry-footer.phpの作成

FTPで/wp-content/themes/sango/parts/single/entry-footer.phpにあるentry-footer.phpをダウンロード。

追加したのは「この記事をシェアする」と書かれた部分だけです。

※via=MethodBlog部分は@を抜いたTwitterIDを入れましょう。

入力が終わったら子テーマにアップロード。親テーマと同じ場所にすることで、先に子テーマの方が読み込まれるようになります。

STEP

footer.phpにコードを追記

同様に親テーマからfooter.phpをダウンロードして、冒頭に下記のコードを挿入しましょう。

※functions.phpからだと動かない場合やエラーが出ることがあったのでフッターに記述しています。

以上です。

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

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

PORIPU-SANGO公認の子テーマ
デザイン追加:アイキャッチをバイラル風にする アイキャッチをバイラルデザインに変更できます。 SANGOの記事デザインを変更する方法 投稿画面「投稿の属性」…

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

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

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

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

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

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

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

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

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

Code Snippetsの導入

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

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

ねたわん
Code Snippets ? functions.phpのコードを管理できるWordPressプラグイン - ねたわん Code Snippetsは、WordPressテーマの関数を定義する「functions.php」のPHPコードを管理できるプラグインです。 通常の場合は、「functions.php」にPHPコードを直接記述し...

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');
</img[^>

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

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

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

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

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

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

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

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

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

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

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

一括テンプレート変更

  1. 投稿一覧画面から、変更したい記事をまとめて選択
  2. 編集>適用を押して、一括編集メニューがでたらテンプレートをバイラル風アイキャッチにします。

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

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

SANGOのモバイル表示で、左右ぐらつく時は@media (max-width: 768px) {
.m-all {
overflow-x: hidden;
}

というCSSを追加してやると
「はみ出た部分」が非表示になって、ぴったり表示できます。#WordPress pic.twitter.com/0ZZgKv3znL

— すいみん💤@CGブロガー (@cg_method) May 15, 2020


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

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

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

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

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

SANGOのカテゴリーページの記事化

すいみん

カテゴリーページをまとめ記事にする為のカスタマイズです。

【WordPress】SANGOのカテゴリーページのカスタマイズ[記事ページ化]

目次
閉じる