SANGOの初期設定・移行後の設定【WordPress・テーマ】

WordPressテーマ「SANGO」は非常に見た目のきれいなテーマです。当サイトも「SANGO」に乗り換えました。一方、初期設定は少し苦しみました。そこで、ここでは「SANGO」の初期設定について、少し整理していきたいと思います。
Welcome
  • 子テーマほぼ必須
  • プラグインの取捨選択も必須
  • AddQuickTagの設定も必須

SANGOのダウンロード

親テーマのダウンロード

SANGOは購入後、以下のサイトからダウンロードできます。

参考 SANGO親テーマBooth

購入済みボタンを押すと、ダウンロードページに移ります。

子テーマのダウンロード

SANGOはほぼカスタマイズが必要ですので、子テーマを準備します。

参考 SANGO子テーマサルワカ

AddQuickTagのダウンロード

SANGOには様々なショートコードがついています。ショートコードを効果的に利用するために、AddQuickTagのエクスポートファイルをダウンロードします。

参考 SANGOのクイックタグサルワカ

子テーマの編集

次に子テーマを編集します。

style.css

デフォルトのフォントを「游ゴシック」から変えるなどの変更を行います。

/* サイト全体のフォントを変える */
body {
   font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}

/* 初期設定でQuicksandが使われている部分を変える */
.dfont {
   font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
}


/* 見出しの変更 */
.entry-content h2 {
    color: #ffffff;
    background-color: #33BCF2;
    padding: 0.5em;
    margin-bottom: 0.5em;
    line-height: 2.0;
}

/* ヨメレバ・カエレバ用 */
.kaerebalink-name img , .kaerebalink-image > img{
    display: none;
}
.kaerebalink-name p {
    margin-bottom: 0;
}

.booklink-image > img {
    display: none!important;
}

/*トップページと記事ページの最大幅を揃える*/
/*
@media only screen and (min-width: 1240px) {
.single .wrap, .page .wrap, .archive .wrap, .single #inner-content, .page #inner-content {
    width: 1000px;
}
}
*/

/* 吹き出しの周囲の線を消す */
.entry-content .faceicon img {
    border: none;
}

/* トップのアニメーションをOFFにする */
.home #container .header, #divheader, .cardtype__article:first-child, .cardtype__article:nth-child(2), .sidelong__article:first-child, .sidelong__article:nth-child(2) {
    animation: none;
}

page-forfront.php

トップページ用固定ページでも「ヘッダーアイキャッチ画像」が表示できるように変更します。

<?php 
get_header(); ?>
<?php get_template_part('parts/home/featured-header'); ?>
			<div id="content" class="page-forfront">
				<div id="inner-content" class="wrap cf">
					<main id="main">
						<div class="entry-content">
						<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
					                  <?php
					                    the_content();
					                  ?>
						<?php endwhile; ?>
						<?php else : ?>
							<?php get_template_part('content', 'not-found'); ?>
						<?php endif; ?>
						</div>
					</main>
				</div>
			</div>
<?php get_footer(); ?>

「テーマのアップロード」&「初期設定」

SANGOの子テーマの準備が終わったら、WordPressにテーマをアップロードします。そして、他のWordPressテーマと同様に設定をしていきます。

初期設定のチェックリスト
  • http → httpsへの変更
  • パーマリンクの変更(投稿名)
  • メディア(月単位のネーミングルールをOFF)
  • 表示設定(投稿:12件・RSS:抜粋のみ)
  • ディスカッション(投稿のデフォルト設定をすべてOFF)

SANGOと相性のいいプラグインの導入

続いてプラグインを導入します。SANGOは「Yoast」や「All in One SEO Pack」と一部機能が重なりますので、もし利用していたらOFFにする必要があります。

注意
既にYoastなどでMetaデータを利用している場合は、SQLでPost Meta Dataからデータを抽出したほうがいいと思います。
SANGOに入れるべきプラグイン
  • Akismet Anti-Spam
  • AddQuickTag
  • Autoptimize
  • Google XML Sitemap
  • Table of Contents Plus(TOC+)
  • Broken Link Checker
  • Markup (JSON-LD) structured in schema.org
  • WebSub/PubSubHubbub
  • WordPress Ping Optimizer
  • WP Multibyte Patch
  • WP-Optimize

公式サイトの情報も是非ご覧ください。

参考 相性の悪いプラグインとおすすめプラグインSANGOカスタマイズガイド

AddQuickTagの編集

Sangoのショートコードが記載された「AddQuickTag」のエクスポートファイルですが、外部リンクする際など、別のタブで開くように設定を変えてしまったほうが便利だと思います。そこで、「target="_blank"」を必要なショートコードに追加することをお勧めします。

サイトマップの再送信

当サイトはもともと、Yoastのサイトマップ機能を利用していましたが、「Google XML Sitemap」に変更しましたので、GoogleとBingのウェブマスターツールでサイトマップの再送信を行いました。検索結果には当面影響はないと思いますが、忘れないようにぜひご注意ください。

まとめ

当サイトは上記に加え、もともとあったCSSからSANGOのショートコードに一部を切り替える作業も行いました。SANGOに事前設定されているCSSとバッティングしないように調整していくところに手間がかかりました。ともあれ、何とか2日間で移行できてよかったと思います。

SANGOはショートコードがたくさんある分、覚えるのが大変かもしれません。カスタマイズガイドはボリュームがあり、最初はなかなかわかりづらいと思いますので、まずは上記の流れで作業をしてから、個別のカスタマイズをしてみるといいと思います。

参考 SANGOカスタマイズガイドサルワカ