【コピペで完成】SANGOの簡単設定!1時間でサイトを作る方法

sangoテンプレートの設定

ワードプレスのテーマとして、有名な「SANGO」。

 

テーマの設定は初心者には難しく、途中で挫折するユーザーが多くいます。

 

この記事では、月に500万円の売上をあげてる、私が実際に使っている設定を公開してます。

 

記事を見ながら設定するだけで、下記と同じ見た目のサイトを作れます。

ウォーターサーバー Wiki

ウォーターサーバー WIKI

 

アフィリエイトのプロが使っている設定を真似て、いったん運用してみてから自分好みに変更すれば、初心者が挫折しやすい設定を簡単にでき、記事の作成に集中できます。

 

手順通りにやれば、1時間程度でサイトの初期設定は終わります。

 

基本、コピペでできるので、がんばってくださいね ^^

ワードプレスの初期設定

設定 → 一般 → WordPress アドレス (URL)、サイトアドレス (URL)をhttpからhttpsに変更して、サイトにログインしなおす。

httpsに変更

 

これをすることにより、以後作られるファイルが全てhttps対応のものとなるので、必ず最初にする。

注意
httpsの設定がサーバーでのドメイン設定時に、あらかじめ必要な場合があるので、注意!

エックスサーバーはhttps(ssl化)は事前にサーバー側で設定が必要。

「設定 → パーマリンク設定」 カスタム構造に

/%postname%-%post_id%/

を張り付ける

「post_id」は記事IDを付与してくれるので、URLの重複が防げるうえに、記事IDの確認が簡単になるのでオススメ。

記事のURLにIDを付与

 

記事のIDの確認方法

「外観 → テーマ」 「SNGO Child」を有効化する

子テーマを有効化

 

子テーマを有効化しておかないと、親テーマがバージョンUPで更新されたときに、カスタマイズしたCSSなどが上書きされて無効化されてしまう。

 

カスタマイズ(sango:テンプレート)の初期設定

「外観 → カスタマイズ」

カスタマイズの基本設定

 

サイトの基本設定

「外観 → カスタマイズ → サイトの基本設定」

サイトの基本設定

注意
下記で各項目の設定を解説しますが、画像に何も注意書きがない場合は、設定の変更は必要ないです。

 

基本情報とロゴの設定

デフォルトのサムネイル画像

アナリティクスのコードを入力

背景画像の設定

opg画像の設定

パブリッシャーを登録

 

「外観 → カスタマイズ → 色」

デフォルトの配色を使用。配色を変えたい場合は下記を参照。

参考 配色の見本サルワカ
サイトの色設定

 

デザイン・レイアウト

「外観 → カスタマイズ → デザイン・レイアウト」

デザイン・レイアウト

 

記事一覧レイアウト

フォントサイズ

フォント種類

 

SANGOオリジナル機能

「外観 → カスタマイズ → SANGOオリジナル機能」

SANGOオリジナル機能

 

記事一覧タブ切替設定

記事一覧タブ切替設定の続き

 

カテゴリーIDの確認方法

カテゴリーIDの確認方法

モバイル用フッター固定メニュー

ヘッダーお知らせ欄

フォローボックスの設定

FeedlyのURLには「https://feedly.com/i/subscription/feed/サイトURL/feed」を入力。
*サイトURLは自分のサイトのURL

関連記事の設定

おすすめ記事(記事下)の設定

CTAの設定

トップへ戻るボタンの設定

シェアボタンの設定

 

ヘッダーアイキャッチ画像

「外観 → カスタマイズ → ヘッダーアイキャッチ画像」

ヘッダーアイキャッチ画像の設定

 

このサイトの場合は、ヘッダーアイキャッチ画像は横2400px・縦500pxで作ってます。

2400×700ぐらいでもいい気はします。

ヘッダーアイキャッチ画像の設定

2分割ヘッダーアイキャッチ設定

 

高速化

「外観 → カスタマイズ → 高速化」

高速化

 

詳細設定

「外観 → カスタマイズ → 詳細設定」

詳細設定

NEWマークの詳細設定

 

メニュー、ウィジェット

「外観 → カスタマイズ → メニュー、ウィジェット」

カスタマイズ機能で設定せずに、「外観 → ウィジェット」、「外観 → メニュー」で個別に詳細設定

メニュー、ウィジェットの設定

 

ホームページ設定

「外観 → カスタマイズ → ホームページ設定」

ホームページ設定

 

追加 CSS

「外観 → カスタマイズ → 追加 CSS」

下記のコードを追加

/* サイドバーの目次の色 */
.ez-toc-list .active {
  background-color: #ededed;
}

/* 目次の点を非表示化 */
.toc_list li {
    font-weight: 700;
    list-style: none;
}

.entry-content h2 {
  position: relative;
}

.entry-content h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6bb6ff, #6bb6ff 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6bb6ff, #6bb6ff 2px, #fff 2px, #fff 4px);
}

 

プラグインの初期設定

 

AddQuicktag:ショートコードやタグを登録して、文章に挿入できるプラグイン

memo

インストールファイルのダウンロード
上記からファイルをダウンロードして、ZIPファイルを解凍後、AddQuicktagでインポートをすると、下記と同じタグを一気にインストールできます。

 

addquicktagのインポート

 

ファイルの解凍ができない場合はここで解凍をしてください。

 

タグを登録しても、チェックボックスにチェックを入れないと、エディタで表示されないので注意!

addquicktagの設定

addquicktagの表示設定

 

個別にAddQuicktagに登録する場合は、下記を参考にして個別に登録してください。

 

太字
<b></b>

テキスト

addquicktagの設定

 

赤太字
<span class="red"><b></b></span>

テキスト

 

メモ
[memo title="memo"]
<ul>
 	<li><b>テキスト</b></li>
 	<li><b>テキスト</b></li>
</ul>
[/memo]
memo
  • テキスト
  • テキスト

 

注意書き
[alert title="注意"]ここに文章[/alert]
注意
ここに文章

 

ポイント まとめ
[box class="box32" title="POINT"]
<ul>
 	<li><b>テキスト</b></li>
 	<li><b>テキスト</b></li>
 	<li><b>テキスト</b></li>
 	<li><b>テキスト</b></li>
</ul>
[/box]
POINT
  • テキスト
  • テキスト
  • テキスト
  • テキスト

 

ボックス(枠)黒
[box class="box2"]ここに文章[/box]
ここに文章

 

ボックス(枠) タブ付 緑枠
[box class="box28" title="タイトル"]文章[/box]
タイトル
文章

 

リスト 矢印 枠付き
[list class="li-chevron li-mainbdr main-c-before"]
<ul>
	<li> </li>
	<li> </li>
	<li> </li>
</ul>
[/list]
  •  
  •  
  •  

 

リスト 番号 枠付き
[list class="ol-circle li-mainbdr main-bc-before"]
<ol>
<li></li>
<li></li>
<li></li>
</ol>
[/list]
  1.  
  2.  
  3.  

 

リスト チェックリスト
[list class="li-check li-mainbdr main-c-before"]
<ul>
<li></li>
<li></li>
<li></li>
</ul>
[/list]
  •  
  •  
  •  

 

アコーディオン
[open title='タイトル'] 隠す内容 [/ open]

*上記を登録する際には[/ open]の間のスペースは削除してください。

*クリックすると表示が現れる枠です。この説明自体をアコーディオンの枠内で作っています。

 

タイムライン
[timeline]
[tl label='手順1' title='タイトル1']
中身1
[/tl]
[tl label='手順2' title='タイトル2']
中身2
[/tl]
[tl label='手順3' title='タイトル3']
中身3
[/tl]
[tl label='手順4' title='タイトル4']
中身4
[/tl]
[tl label='手順5' title='タイトル5']
中身5
[/tl]
[/timeline]
手順1
タイトル1
中身1
手順2
タイトル2
中身2
手順3
タイトル3
中身3
手順4
タイトル4
中身4
手順5
タイトル5
中身5

 

関連記事
[kanren id="投稿ID"]
イラストレーターでの加工方法非公開: イラストレーターでの画像の作り方

 

参照元
[sanko href="URL" title="ページタイトル" site="サイト名" target="_blank"]
参考 FXの歩き方

 

影付きボタン(アクセントカラー)
[btn href="リンク先のURL" class="raised accent-bc strong"]ボタンテキスト[/btn]

ボタンテキスト

 

影付きボタン(メインカラー)
[btn href="リンク先のURL" class="raised main-bc strong"]ボタンテキスト[/btn]

ボタンテキスト

 

評価ボックス
[rate title="◯◯の評価"]
[value 3.5]◯◯[/value]
[value 3.5]◯◯[/value] 
[value 3.5]◯◯[/value]
[value 3.5 end]総合評価[/value]
[/rate]
◯◯の評価
◯◯
(3.5)
◯◯
(3.5)
◯◯
(3.5)
総合評価
(3.5)

 

誘導ボタン
<p style="text-align: center;">[btn href="/" class="raised main-bc strong" target="_blank" yoko]もっと詳細が知りたい[/btn] [btn href="/" class="raised accent-bc strong" target="_blank" yoko]公式サイトはコチラ[/btn]</p>

もっと詳細が知りたい  公式サイトはコチラ

 

テーブル
<table class=" tb-responsive" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr style="background-color: #f3f6fc;" align="center">
<td><b>500ml換算(税抜き)</b></td>
<td><b>レンタル料</b></td>
<td><b>電気代</b></td>
<td><b>送料</b></td>
</tr>
<tr align="center">
<td>75.3円</td>
<td>無料</td>
<td>1,060円</td>
<td>無料</td>
</tr>
<tr style="background-color: #f3f6fc;" align="center">
<td><b>配送本数(1回)</b></td>
<td><b>ボトルの種類</b></td>
<td><b>お水の種類</b></td>
<td><b>配送地域</b></td>
</tr>
<tr align="center">
<td>14~24ℓ×2本</td>
<td><span class="red"><b>使い捨て</b></span></td>
<td><span class="red"><b>天然水</b></span> 1種類</td>
<td>全国</td>
</tr>
</tbody>
</table>
500ml換算(税抜き)レンタル料電気代送料
75.3円無料1,060円無料
配送本数(1回)ボトルの種類お水の種類配送地域
14~24ℓ×2本使い捨て天然水 1種類全国
それぞれの列の横幅を調整したり、2つのセル(ブロック)を1つにつなげたり細かい方法は下記を参照してください。

普段よく使う、装飾やタグを登録しておくと作業効率が何倍もUP!

アフィリエイター必須のプラグインです ^^

 

 

Advanced Editor Tools (previously TinyMCE Advanced):投稿エディタの拡張、強化

ツールバーの整理

ツールバーのオプション設定

ツールバーの上級者向け設定 

 

 

Autoptimize:CSS、JS、画像の最適化で表示速度を高速化

autoptimizeの設定

autoptimizeのcss設定

autoptimizeのオプション設定

 

 

Captcha by BestWebSoft:ログイン時に数字の入力を追加するプラグイン

ログイン時に数字の入力を追加するプラグイン

Captcha by BestWebSoftの設定

 

 

Classic Editor:旧エディタの画面に戻す。ブロックエディタ(クーテンベルク)を使用する場合は不要

Classic Editorの設定

 

 

Easy Table of Contents:目次を自動で作成するプラグイン

 

Easy Table of Contentsの設定

Easy Table of Contentsの外観設定

Easy Table of Contentsの高度な設定

Easy Table of Contentsの設定完了

 

 

Edit Author Slug:ログインIDを外部からわからなくし、不正ログインを防ぐ。外部に見えるユーザー名を任意のものに変更できる。

デフォルト設定でOK。設定の変更の必要なし

 

 

EWWW Image Optimizer:自動で画像圧縮をし、サイトの表示スピードを高める

 

EWWW Image Optimizerの設定

EWWW Image Optimizerの設定完了

 

Google XML Sitemaps:Google向けのサイトマップ作製。コンテンツを検索エンジンに認識してもらい、検索順位を高める

 

Google XML Sitemapsの設定

Google XML Sitemapsの優先順位設定

Google XML Sitemapsの重要度設定

Google XML Sitemapsの重要度数字設定

 

 

Limit Login Attempts Reloaded:WordPressのログイン回数を制限。不正ログインを防ぐ

 

Limit Login Attempts Reloaded

 

 

PS Auto Sitemap:ユーザー向けのサイトマップを作製。ユーザービリティが向上し、アクセス数が増加。

 

PS Auto Sitemapの設定

 

設定後、固定ページに下記を記入するとサイトマップが表示される
<!-- SITEMAP CONTENT REPLACE POINT -->

 

 

Rinker:Amazon・楽天・Yahoo!ショッピングを一括で紹介できる商品ボックス。物販系のサイトは必須。

簡単に下記のような商品リンクが作れます。

Rinkerの設定

参考 Rinker導入はこちらから

ダウンロードはこちら

 

 

Search Regex:文字やコードの検索、置き換え。

通常は使わないので、普段はプラグインを無効化しておく。

広告コードや数字データが変更になった時、変更するのが簡単になる。

 

 

Simple Post Notes:記事一覧や投稿画面にメモ書きができるようになる

特に設定する必要は無し。

Simple Post Notesの設定

 

UpdraftPlus:サイトのバックアップ。BackWPUpが有名だが、こちらの方が使いやすくおすすめ。

 

サーバー上にバックアップファイルが作られるが、念のため月に1回データをダウンロードして、自分のPCに保存したほうがより安全。

UpdraftPlusの設定

UpdraftPlusのバックアップ設定

UpdraftPlusのバックアップ方法

 

 

Woody code snippets:ショートコード作成プラグイン。よく使いまわすデータや画像の管理に最適

特に設定の必要は無し

Woody code snippetsの設定

Woody code snippetsの使い方

 

 

WP Multibyte Patch:ワードプレスの日本語最適化。不具合修正。

設定は特に必要ありません。

入れないと様々な不具合が出る可能性があるので、インストールしましょう。

 

 

WP User Avatar:投稿者のアバター画像の設定。

設定自体は不要。

ユーザー → 編集 → プロフィール写真で画像を設定したら完了。

WP User Avatarの設定方法

 

WP User Avatarの設定完了後

 

 

WP-Optimize:データを最適化・削減し、表示速度を高速化

 

WP-Optimizeの設定

 

カテゴリー設定

カテゴリー設定

カテゴリー分類設定

 

メニューの設定

「外観 → メニュー」

グローバルメニューの設定

 

設定後の見栄え

グローバルメニュー設定後

フッターメニュー設定

 

ウィジェットの設定

ウィジェットの設定

 

子テーマの設定(SANGO Child)

「外観 → テーマエディター」

functions.phpの変更

下記のコードをfunctions.phpに追加する

 

//Wordpress投稿画面のタイトル文字数をカウントする
function count_title_characters() {?>
<script type="text/javascript">
jQuery(document).ready(function($){
  //in_selの文字数をカウントしてout_selに出力する
  function count_characters(in_sel, out_sel) {
    $(out_sel).html( $(in_sel).val().length );
  }

  //ページ表示に表示エリアを出力
  $('#titlewrap').after('<div style="position:absolute;top:-24px;right:0;color:#666;background-color:#f7f7f7;padding:1px 2px;border-radius:5px;border:1px solid #ccc;">文字数<span class="wp-title-count" style="margin-left:5px;">0</span></div>');

  //ページ表示時に数える
  count_characters('#title', '.wp-title-count');

  //入力フォーム変更時に数える
  $('#title').bind("keydown keyup keypress change",function(){
    count_characters('#title', '.wp-title-count');
  });

});
</script><?php
}
add_action( 'admin_head-post-new.php', 'count_title_characters' );
add_action( 'admin_head-post.php', 'count_title_characters' );

//meta keyword フィールド追加
add_action('admin_menu', 'add_sngmeta_keyword_field');
function add_sngmeta_keyword_field() {//作成
  add_meta_box( 'sng-meta-keyword','メタキーワード', 'show_my_keyword', 'post', 'normal' );
}
function show_my_keyword(){
  global $post;
  echo '<textarea name="sng_meta_keyword" cols="65" rows="1" placeholder="カンマ(,)区切りで指定" style="max-width: 100%">'.get_post_meta($post->ID, 'sng_meta_keyword', true).'</textarea>';
}
//meta keyword フィールド保存
add_action('save_post', 'save_sngmeta_keyword');
function save_sngmeta_keyword($post_id){
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id;
    ( isset($_POST['sng_meta_keyword']) ) ? update_post_meta($post_id, 'sng_meta_keyword', $_POST['sng_meta_keyword']) : "";
}
//headに出力
add_action('wp_head','sng_head_meta_keyword');
function sng_head_meta_keyword() {
 global $post;
 if( is_single() && get_post_meta( $post->ID, 'sng_meta_keyword', true ) ){
  echo '<meta name="keywords" content="'.esc_attr(get_post_meta( $post->ID, 'sng_meta_keyword', true )).'" />';
 }
}
//end meta keywords
//

 

クロージング部分(CTA)の作成

手順の通りに作れば、下記のような見栄えのクロージング用の誘導箇所が作れます。

ウォーターサーバーシェアNo1!家計に優しい「プレミアムウォーター

プレミアムウォーター

500ml換算(税抜き)レンタル料電気代(省エネタイプ)送料
81.6円(最安プラン63.3円無料1,050円(510円)無料
配送本数(1回)ボトルの種類お水の種類配送地域
12ℓ×2本、7ℓ×2本使い捨て天然水 5種類全国

*プランによってお水の料金、機種によって電気代は変わります。

プレミアムウォーターがおすすめな理由
  • 「たまひよ」赤ちゃんグッズ大賞2020年第1位
  • 天然水ウォーターサーバー「シェア、顧客満足度」No1!
  • 「モンドセレクション、International Taste Institute」7年連続 W受賞
  • 子供がいる家庭には、サーバーレンタル料500円、24ℓのお水が税込み3,283円になるお得なプランがある

もっと詳細が知りたい  公式サイトはコチラ

 

手順1
見出しを作る
h3かh4の小見出しの見出しを使う
手順2
画像を挿入
横700px・縦350pxに切り抜いた画像を挿入
手順3
テーブルを挿入
AddQuicktagで登録した「テーブル」を挿入し、内容を変更
手順4
メモボックスを挿入
AddQuicktagで登録した「メモ リスト付き」を挿入し、内容変更
手順5
誘導ボタンの設置
AddQuicktagで登録した「誘導ボタン」を挿入し、リンク先URLを広告コードを挿入
手順6
Woody snippetsに登録
Woody snippetsに登録し、ショートコードを記事に張り付け

 

作ったものは「Woody snippets」プラグインに登録して読みコードとして使えば、複数のページに載せていても、Woody snippetsのデータを直せば全てのページが直せるので、管理が楽になります。

 

また、複数のCTA(商品:3つぐらいがベター)を載せることにより、ユーザーの選択の幅が広がり、売上UPになります。

 

テーマ「SANGO」の設定 まとめ

まとめ
  • 初期設定はコピペでOK
  • プラグインは最小限に
  • CTA(クロージング)も簡単に作れる

 

記事の通りにすれば、意外に簡単に設定が終わったかと思います。

 

「あんな機能やこんな見栄えを使いたい」そういう気持ちはよくわかります。

 

ただ、騙されたと思って、今回の設定で記事を作ってみてください。

 

思っている以上にスムーズに、見栄えの良い記事を作れるはずです。

 

慣れてきてから、自分好みにサイトをカスタマイズすることをおすすめします。

 

この記事が役に立ったら、ブックマークか、SNSでシェアしていただけると嬉しいです ^^

最後までお読みいただきありがとうございました。