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

WordPressテーマ「SANGO」は非常に見た目のきれいなテーマです。当サイトも「SANGO」に乗り換えました。一方、初期設定は少し苦しみました。そこで、ここでは「SANGO」の初期設定について、少し整理していきたいと思います。

SANGOのダウンロード

親テーマのダウンロード

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

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

子テーマのダウンロード

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

AddQuickTagのダウンロード

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

子テーマの編集

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

style.css

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

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

/* 初期設定でQuicksandが使われている部分を変える */
.dfont {
   font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"ＭＳ Ｐゴシック","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テーマと同様に設定をしていきます。

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

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

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

AddQuickTagの編集

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

サイトマップの再送信

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

まとめ

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

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