WordPressテーマSANGOのphp/css独自カスタマイズ14選

SANGOカスタマイズ

WordPressでブログ運営している人も多くなり、Wordpressテーマ「SANGO」を使用しているユーザーも増えてきました。

設定とショートコードが充実している素晴らしいテーマですが、さらに細かい部分までカスタマイズしたい場合は各種phpファイルを編集することになります。

今回は、筆者の私が修正した独自カスタマイズの内容を公開します。参考になる部分だけでも活用していただければ幸いです。

トップページのカスタマイズ

01.トップページだけ横幅が異なる部分の調整

SANGOでよく指摘されているのが、2カラムのレイアウトでトップページだけ横幅(width指定値)が異なるというもの。

修正方法としては、public_html/wp-content/themes/sango-theme-child/style.cssに、以下の指定を追記するだけでOKです。

style.cssに追記

/* トップページだけ幅が異なる部分の調整 */
@media only screen and (min-width: 1230px) {
 .wrap { width: 1180px; }
 .d-5of7 { width: 70%; } /*メインコンテンツ幅*/
 .d-2of7 { width: 30%; } /*サイドバー幅*/
}

02.トップページのみ記事表示数を変える

記事表示数は、設定→表示設定の「1ページに表示する最大投稿数」欄で変えることができるとされていますが、ここを変えるとトップページ、タグ、カテゴリ、新着記事などすべてに対してこの値が適用されます。

トップページのみ記事表示数を変えたいという場合は、public_html/wp-content/themes/sango-theme/parts/post-grid.php を修正します。

post-grid.phpを修正(赤字のとおり修正)

 	//(1)横長の場合
if( is_sidelong() ): ?>
		<div class="sidelong cf">
			<?php if ( is_home() || is_front_page() ){
					$poststime = 0;
					while (have_posts() & ($poststime < 3)) : the_post();
						sng_sidelong_card();/*sng-functions.phpで定義*/
						$poststime++;
						endwhile;
				} else {
					while (have_posts()) : the_post();
						sng_sidelong_card();/*sng-functions.phpで定義*/
						endwhile;
				}
			?>
		</div>
<?php else : //(2)カードタイプの場合?>
		<div class="cardtype cf">
			<?php if ( is_home() || is_front_page() ){
					$poststime = 0;
					while (have_posts() & ($poststime < 3)) : the_post();
						sng_normal_card();/*sng-functions.phpで定義*/
						$poststime++;
						endwhile;
				} else {
					while (have_posts()) : the_post();
						sng_normal_card();/*sng-functions.phpで定義*/
						endwhile;
				}
			?>
		</div>

上のコードでは「3」を指定しているので、トップページのみ3記事表示されるようになります。3以外の数値を指定しても問題ありません。

03.トップページのみページング機能パーツを削除する

新着記事などの過去分を見たいときにクリックする「①②…⑳」のページング機能ですが、トップページのみ非表示にしてボタン化するとスッキリします。

修正方法としては、public_html/wp-content/themes/sango-theme/parts/post-grid.php を以下のとおりにします。

post-grid.phpを修正(赤字のとおり修正、緑字は各自で修正)

<?php endif;
	if ( is_home() || is_front_page() ){
	?> <div class="center"><a href="https://tabihow.jp/author/seshimo" class="raised blue-bc strong">新着記事をもっと見る</a></div> <?php
	} else { sng_page_navi(); }
} else {//記事なし

ボタン化することで、新着記事のみ(正確には執筆者の記事履歴)を表示する専用ページに飛ばすことができます。

サイドバーのカスタマイズ

04.簡易的な自己紹介欄を作成

SANGOの公式サイトにサイドバー自己紹介を作る標準的なHTMLタグが用意されていますが、個人的には「他のSANGOユーザーと異なる見た目」で「名刺サイズ的な横長」なものが好み。

以下のようなHTMLを作ってみましたので、これを外観→ウィジェット→カスタムHTMLで以下のソースを貼り付ければOKです。

カスタムHTMLフォーム内に新規貼付

<div class="say left" style="margin-left:10px; margin-top:20px;"><p class="faceicon"><img src="https://tabihow.jp/imgblog/akane_154.png"><span>セシモ ユイ</span></p><div style="margin-left:-10px; padding-right:20px; font-size:16px;">国内旅行が好きで47都道府県踏破済。ツイッターでも旅行ネタを中心に発信中!</div></div>

style指定で上下左右の余白を調整してありますので、好みで調整してみると良いです。

05.Twitterフォロワー数を表示

以下のとおり実施すると、Twitterのフォロワーボタンとフォロワー数を表示するためのHTMLが生成されます。
https://publish.twitter.com/#にアクセス
②入力欄に自身のTwitterトップURLを入力してEnter
③選択肢のうち「Twitter Buttons」をクリック
④選択肢のうち「Follow Button」をクリック
⑤青リンクになっている「set customization options.」をクリック
⑤好みでユーザー名表示有無とボタンサイズをチェックボックスで指定
⑥「Update」ボタンをクリック
⑥「Copy Code」ボタンをクリック

コピーしたコードを、外観→ウィジェット→カスタムHTML のパーツ内に貼り付ければOKです。

さらに、コード内の「data-show-count=”false”」部分を「data-show-count=”true”」に変えると、フォロワー数が表示されます。

06.Twitterタイムラインを表示

以下のとおり実施すると、タイムライン表示用のHTMLが生成されます。
https://publish.twitter.com/#にアクセス
②入力欄に自身のTwitterトップURLを入力してEnter
③選択肢のうち「Embedded Timeline」をクリック
④青リンクになっている「set customization options.」をクリック
⑤入力欄「Height」部分に縦ピクセル数を指定。(SANGOだとWidth指定は不要)
⑥「Update」ボタンをクリック
⑥「Copy Code」ボタンをクリック

コピーしたコードを、外観→ウィジェット→カスタムHTML のパーツ内に貼り付ければOK。詳しい解説は、Twitterタイムラインの埋め込みとデザインカスタマイズの方法を見るとわかりやすいです。

07.人気記事を累計ではなく日単位や週単位で表示

SANGO標準の人気記事ウィジェットだと、総累計アクセス数のランキング表示になってしまいます。

日単位の「本日の人気記事」や週単位の「今週の人気記事」にする場合は、やはり「WordpressPopularPost」プラグインを使用するしかないとのことです。

詳しい解説は、https://oldno07.com/sango-pligin-wpp/を見るとわかりやすいです。

各記事共通部分のカスタマイズ

08.コメント欄をそもそも非表示にする

設定で消すことができるはずですが、私の場合はうまくいかず。

別な対処法として、public_html/wp-content/themes/sango-theme/single.phpを以下のとおり修正すればOK。

single.phpを修正(以下赤字を削除)

			       		get_template_part('parts/single/entry-footer');//記事フッターまわり
			       		comments_template();//コメント
								insert_json_ld();//構造化データ

09.フッターのカテゴリー名とタグ名のボタンを削除する

記事の終わり直後に、記事のカテゴリー名とタグ名が表示されます。これが不要であれば削除することもできます。

public_html/wp-content/themes/sango-theme/parts/single/entry-footer.phpにある、以下に示したコード部分を全部削除すればOKです。

entry-footer.phpを修正(以下を全部削除)

        	<div class="footer-meta dfont">
               	<?php if(get_the_category_list()): //カテゴリー一覧を出力 ?>
               	 	<p class="footer-meta_title">CATEGORY :</p>
               	 	<?php echo get_the_category_list(); ?>
               	<?php endif;
               		if(get_the_tags()) : //タグ一覧を出力?>
               		<div class="meta-tag">
               		<p class="footer-meta_title">TAGS :</p>
               		<?php the_tags('<ul><li>','</li><li>','</li></ul>');?>
               		</div>
              	<?php endif; ?>
          	</div>

10.フッターにカテゴリー関連記事、タグ名関連記事を出す

SANGO標準機能の関連記事表示は「完全ランダムに出す」か「各記事の本文中に差し込んで出す」方法は可能ですが、さらに踏み込んで「各記事のカテゴリーやタグと同じカテゴリー関連記事とタグ名関連記事をフッターエリアに出す」方法を紹介します。

まず、テキストエディタで新規phpファイル「original-category.php」「original-tags.php」を作成して、以下のような自己紹介ソースを記述します。

original-category.phpを新規作成

<!-- 冒頭でカテゴリ情報を取得 -->
<?php $cat = get_the_category();         //カテゴリ群を取得して変数に格納(この時点では配列)
$cat_name = $cat[0]->name;               //カテゴリ配列の1番目オブジェクトからカテゴリ名を取得
$cat_id = $cat[0]->cat_ID;               //カテゴリ配列の1番目オブジェクトからカテゴリIDを取得
$link = get_category_link($cat_id);      //カテゴリIDをキーにしてカテゴリのリンクURLを取得
?>

<!-- 独自に作成した関数を呼び出して、カレントカテゴリと同じカテゴリの記事を6件表示する -->
<p class="hh hh11"><a href="<?php echo $link; ?>"><?php echo $cat_name; ?></a> カテゴリの関連記事</p>
<div class="related-posts type_b no_slide" ontouchstart="" style="background:#ffffff"><ul class="cf">
<?php seshimo_posts('c', 6, $cat[0]->term_id); ?>
</ul></div>

<!-- 対象カテゴリ記事をもっと見るボタンを表示する -->
<div class="center" style="margin:-25px 0 15px 0;">
<a href="<?php echo $link; ?>" class="raised blue-bc strong"><?php echo $cat_name; ?> の記事をもっと見る</a>
</div>
original-tags.phpを新規作成

<!-- 冒頭でタグ情報を取得 -->
<?php $tag = get_the_tags();        //タグ群を取得して変数に格納(この時点では配列)
$tag_name = $tag[0]->name;          //タグ配列の1番目オブジェクトからタグ名を取得
$tag_id = $tag[0]->term_id;         //タグ配列の1番目オブジェクトからタグIDを取得
$link = get_tag_link($tag_id);      //タグIDをキーにしてタグのリンクURLを取得
?>

<!-- 独自に作成した関数を呼び出して、カレントタグと同じタグの記事を6件表示する -->
<p class="hh hh11"><a href="<?php echo $link; ?>"><?php echo $tag_name; ?></a> タグの関連記事</p>
<div class="related-posts type_b no_slide" ontouchstart="" style="background:#ffffff"><ul class="cf">
<?php seshimo_posts('t', 6, $tag[0]->term_id); ?>
</ul></div>

<!-- 対象タグ記事をもっと見るボタンを表示する -->
<div class="center" style="margin:-25px 0 15px 0;">
<a href="<?php echo $link; ?>" class="raised blue-bc strong"><?php echo $tag_name; ?> の記事をもっと見る</a>
</div>

この2つのphpファイルを、public_html/wp-content/themes/sango-theme-childの中へ放り込みます。

次に、public_html/wp-content/themes/sango-theme-child/functions.phpに、以下の関数を追記。

functions.phpに追記

if (!function_exists('seshimo_posts')) {
  function seshimo_posts($type, $num, $input_id) //カテゴリー'c'orタグ't', 関連記事出力数, カテゴリーIDorタグID
  {
    if ($type == 'c') {
     $related_posts = get_posts(array(
      'category' => $input_id,
      'numberposts' => $num,
      'orderby' => 'rand',
     ));
    }
    if ($type == 't') {
     $related_posts = get_posts(array(
      'tag_id' => $input_id,
      'numberposts' => $num,
      'orderby' => 'rand',
     ));
    }
    if ($related_posts) {
      $design = 'type_b';
        foreach ($related_posts as $related_post):
          $thumbnail = get_post_thumbnail_id($related_post->ID);
          $src_info = wp_get_attachment_image_src($thumbnail, 'thumb-520');
          $src = $src_info[0];
          if (!$src && get_option('thumb_upload')) { //アイキャッチ画像が無い時は登録されたデフォルト画像を探す
            $src = replace_thumbnail_src(esc_url(get_option('thumb_upload')), "thumb-520");
          } elseif (!$src) { //それでも無い場合はテンプレートフォルダから
            $src = get_template_directory_uri() . '/library/images/default_small.jpg';
          }
          $title = $related_post->post_title;
          ?>
          <li>
            <a href="<?php echo get_permalink($related_post->ID); ?>">
              <figure class="rlmg">
                <img src="<?php echo $src; ?>" alt="<?php echo $title; ?>">
              </figure>
              <div class="rep"><p><?php echo $title ?></p></div>
            </a>
          </li>
      <?php
        endforeach;
    }
  }
}

そして、public_html/wp-content/themes/sango-theme/parts/single/entry-footer.phpを以下赤字のとおり追記。

entry-footer.php(赤字部分を追記、緑字部分は各自修正)

        	<div class="footer-meta dfont">
               	<?php
		if(get_the_category_list()) {
			if(file_exists('/home/seshimo3/tabihow.jp/public_html/wp-content/themes/sango-theme-child/original-category.php')) {
               	 		get_template_part('original-category'); //カテゴリー一覧を出力
			}
		}
               	if(get_the_tags()) {
			if(file_exists('/home/seshimo3/tabihow.jp/public_html/wp-content/themes/sango-theme-child/original-tags.php')) {
               			get_template_part('original-tags'); //タグ一覧を出力
              		}
		}
		?>

ちなみに、子テーマのphpが消えるなどファイルが存在しなくなった場合を想定してfile_exists関数でファイル有無をチェックしている内容となっています。

11.フッターに自己紹介を出す独自カスタマイズ

SANGO標準機能で自己紹介欄を表示できますが、顔画像を外部サイトに登録する必要があり面倒。表示位置やレイアウトもカスタマイズしにくく、それなら独自で作成したほうが見た目の調整やパーツ追記もしやすくてオススメです。

まず、テキストエディタで新規phpファイル「introduce.php」を作成して、以下のような自己紹介ソースを記述します。(SANGO標準機能の自己紹介ショートコードを参考に用意しました)

introduce.phpを新規作成(緑字は各自で修正)

<br>
<!-- 記事下の自己紹介(divの閉じタグはひとつ不足させる) -->
<div class="author-info__inner" style="margin:4px; padding:4px; background:#ffd282">
 <div class="tb" style="background:#fcf1e0;">
  <div class="tb-left">
   <div class="author_label">
    <span>記事を書いた人&運営者</span>
   </div>
   <div class="author_img">
    <img src='https://tabihow.jp/imgblog/akane_154.png' class='avatar avatar-100 photo' />
   </div>
    <dl class="aut">
     <dt><a class="dfont" href="https://tabihow.jp/author/seshimo/"><span>セシモ ユイ</span></a></dt>
     <dd>趣味の旅行ブロガー</dd>
    </dl>
   </div>
   <div class="tb-right">
    <p>WELQ問題をきっかけに、自分で旅行した体験と撮影写真をもとに「本物の国内旅行まとめサイト」を作成。<br>
    添乗員系Vチューバーとしても活動予定で、国内の情報を解説するため日々勉強中。</p>
    <div class="center follow_btn dfont">
     <a class="Twitter" href="https://twitter.com/seshimo_tv" target="_blank" rel="nofollow">Twitter</a>
     <a class="Facebook" href="https://www.facebook.com/seshimo3" target="_blank" rel="nofollow">Facebook</a>
     <a class="YouTube" href="https://www.youtube.com/channel/UC3TRg7beYnnhAbNJQ-hTNbg/" target="_blank" rel="nofollow">YouTube</a>
    </div>
    <div class="center">
     <a href="https://tabihow.jp/blogt001/" class="raised blue-bc strong">私の作業デスク</a>
     <a href="https://tabihow.jp/tools001/" class="raised blue-bc strong">私の旅行道具</a>
    </div>
   </div>
  </div>
 </div>

このphpファイルを、public_html/wp-content/themes/sango-theme-childの中へ放り込みます。

そして、public_html/wp-content/themes/sango-theme/parts/single/entry-footer.phpを以下赤字のとおり追記。

entry-footer.php(赤字部分を追記)

        	<?php insert_social_buttons(); //シェアボタン?>
        	<?php insert_like_box();//フォローボックス?>
			<?php get_template_part('introduce');?>
			<?php
			if(get_the_tags()) {

これでフォローボックスの直下に自己紹介が表示されます。もし別の場所に自己紹介を表示したい場合は、赤字部分を別の行に追記すればOKです。

全体のカスタマイズ

12.widgets.jsをHEAD内に貼る

ブログの各記事でTwitterツイートを引用する際、毎回widgets.jsを呼び出すコードが付いてしまいます。これをHEADタグ内で記述しておくことで、記事内でわざわざwidgets.jsを呼び出さなくても済むようになりスムースな表示とコードになります。

SANGOのカスタマイズ→詳細設定 を開き、「headタグ内にコードを挿入」の欄に以下のコードを貼り付ければOKです。

設定フォーム内に新規貼付

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

あとは、各記事でTwitterツイートを貼り付けたときに、当コードを毎回除去することでwidgets.jsを個々に呼び出さない状態にできます。

13.サムネイル画像のサイズ縮小

FFFTPなどで画像をアップロードする人であれば、public_html/wp-content/themes/sango-theme-child/functions.phpに以下の関数を追記して画像サイズを変更します。

functions.phpを修正(緑字を各自で修正)

    add_image_size('thumb-940', 940); //関連記事等で利用

    add_image_size('thumb-520', 300, 200, true); //関連記事等で利用

    add_image_size('thumb-160', 150, 150, true); //サムネイルサイズ

これで、画像生成、画像読み込みすべて対処できます。

14.サイトタイトルの区切り文字を変える

Yahoo!やGoogleの検索結果やブックマークで表示される、記事タイトルとサイトタイトルの間の区切り文字を修正する方法。

public_html/wp-content/themes/sango-theme/head.phpを以下のとおり修正するだけでOK。初期状態は区切り文字「|」ですが「-」などに変えることができます。

head.phpを修正(緑字を各自で修正)

function sng_document_title_separator($sep)

{

  $sep = '-';

  return $sep;

}

まとめ

以上、Wordpressテーマ「SANGO」で筆者の私が使用している独自カスタマイズ集でした。