【WordPress】SANGOのカスタマイズメモ(初級編)

WordPressテーマ「SANGO」をインストールしたは良いものの、次は何をすれば良いの?という方に送る、初期カスタマイズメモ!

http://hikarium.com/wp-content/uploads/2016/12/point_maki01.jpg
まきちゃん

初級編「最低限サイトを見た人が迷わないようにするための初期初期設定」です。パンでいうとプレーンの食パンです。

「SANGOインストールしたけどカスタマイズ面倒だから明日でいっか〜」と寝る前に、とりあえずこれだけは設定しておいてください。
メニューと基本情報の設定だけなんで!30分くらいだから!!!

SANGOの良いところはとにかく公式マニュアルが分かりやすい点。
公式サイトも見つつ、最低限!これだけやっておけば一安心!というSTEPをお送りします。

はじめに

前提条件

テーマ「SANGO」と子テーマをインストール済であること。

【テーマ】WordPressのカスタマイズを楽にしてくれるデータ
【子テーマ】テーマを安全にカスタマイズする用の書き換え用データ

インストール方法は下記サイトをご参照ください。

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

全体の流れ

テーマと子テーマをインストール後、メニューがないのでお客さんが見たい記事を探しにくいですね。
このページは細かくデザインする前段階、とりあえず必要な要素を揃えるためのカスタマイズメモです。正直テーマがおしゃれなので、こだわりが無かったらこの初級編だけでも全然大丈夫です。

全部で6STEP!流れはざっとこんな感じ!

STEP.1
サイトの基本情報を入れる
サイト名・アクセス解析情報を入れましょう!
STEP.2
メニューの設定をする
タイトル下にメニューを置きましょう!
STEP.3
サイドバーをに入れたい情報を入れる
サイドバーにあると便利な情報を置きましょう!
STEP.4
記事入力画面用プラグインをインストール
新エディタ or 旧エディタの設定をしましょう!
STEP.5
必要・不要なプラグインの取捨選択
不要なプラグインはオフにしましょう!
STEP.6
【延長戦】他テーマからの移行の場合
ショートコード置換問題!これがあると30分では終わりません…ファイトです

それでは1から順に設定して行きましょ〜!

1.サイトの基本情報を入れる

管理画面の「外観」→「カスタマイザー」から、今のサイトデザインをプレビューしながらカスタマイズできます。

↓カスタマイズに詰まった時の公式マニュアル

参考 カスタマイザーでデザインや細かな設定をしようサルワカ

サイト名を入力する

管理画面ダッシュボードから
「サイトの基本情報」→「基本情報とロゴの設定」
「サイトのタイトル」にサイト名を入力します。

また、同画面内「大画面表示時にもロゴを中央寄せ」にチェックすると、サイト名が中央寄せ表示になり、右に寄っていたメニューがサイト名の下に来ます。好みでどちらか選ぶと良いでしょう。

パーマ内リンク設定

Google Analyticsの情報入力

「サイトの基本情報」→「Google Analyticsの設定」
Google Analyticsの「トラッキング ID」を入力します。
(UA-○○○…という英数字です)

※「アナリティクス登録してないからいいや」という方はスルーしてください。

最新記事のレイアウト変更

TOP画面に表示される記事カードのデザイン(縦長か横長か)を変更します。初期は縦長のカードタイプです。
※デフォルトでいい方はスルーしてください。

「デザイン・レイアウト設定」→「記事一覧レイアウト」
スマホ画面で記事一覧が長くなるのが嫌な方は、
【モバイル】トップページの記事一覧カードを横長にする」にのみチェックを打つといいかも。

「え?TOPに最新記事表示されないんだけど」という方は、以前のテーマでTOPページを固定ページにしていた可能性があります。
管理画面の「設定」→「表示設定」から、ホームページの投稿を「最新の投稿」に変更しましょう。

2.メニューの設定をする

ここではとりあえず、カテゴリを決めてそのカテゴリページをメニューにする方法を記載します。

カテゴリを作成する

「投稿」⇒「カテゴリー」

カテゴリーを新規作成します。3〜5つ作成したらとりあえずOK!

メニューを作成する

「メニュー」から、TOPに表示するメニューを選びます。
カテゴリのどれをメニューにするか選び、下記にチェックを入れます。

  • ヘッダーメニュー(PCでのみ表示)
  • スライドメニュー(モバイルのみ)

これを設定しておけば、とりあえず初めて来た人が迷うことはないです。
↓カスタマイズに詰まった時の公式マニュアル

参考 メニューの設定をしようサルワカ

3.サイドバーに入れたい情報を入れる

「ウィジェット」→「サイドバー」
から、サイドにあると便利な情報を追加します。

  • サイト内検索
  • プロフィール
  • カテゴリ一覧

最低限、これだけあれば十分かと。

サイト内検索

プロフィール

プロフィールの設定だけHTMLを修正するのが大変かもしれません。
↓カスタマイズに詰まった時の公式マニュアル

参考 サイドバーにプロフィールを表示サルワカ

TwitterのURL

「https://twitter.com/ユーザー名」

インスタグラムのURL

「https://www.instagram.com/○○○」
この○○○の所に自分のアカウント名を入れます。

カテゴリ一覧

人気記事

4.入力画面用プラグインをインストール

新エディタ、Gutenbergを使う場合

WordPressの記事入力画面が2018年に大幅に変わりました。
「Gutenberg」というデザインで、旧エディタよりも感覚的に入力できる仕様になっています。
SANGOでこのエディタを使う際は、専用のプラグイン「SANGO Gutenberg」をインストールする必要があります。サクッとインストールしちゃいましょう!

参考 SANGOでGutenbergを利用するサルワカ

上記サイトからプラグインをダウンロード。
ダッシュボード「プラグイン⇒新規追加⇒プラグインのアップロード」

アップロードをして「有効化」すればインストール完了です!

Gutenbergを使わず旧エディタを使う場合

Gutenberg用のプラグインは不要です。
ただし最新のWordPressは初めから新エディタになっているので、旧エディタを使う場合は「Classic Editor」というWordPress公式プラグインを入れる必要があります。

参考 Classic Editorwordpress公式サイト

上記サイトからダウンロードし「有効化」すれば旧エディタになりますよ!

新エディタ or 旧エディタの設定が出来たら、次に行きましょう!

5.不要なプラグインを外す

あとちょっとですよ!ファイト!

WordPressには元々プラグインがインストールされています。
また、SANGOを入れる前にカスタマイズを試みていた方はいくつかプラグインをインストールしていると思われます。

今のテーマでは、そのプラグインの機能と同じものや相性が悪いものもあります。なので不要なプラグインを外してトラブルが起きないようにする必要があります。有名な「All In One SEO Pack」とかも、既にSANGOに機能があるのでオフか削除しましょう!

参考 相性の悪いプラグインとおすすめプラグイン(作成中)サルワカ

という訳で、入れているプラグインを全てご紹介。
(WordPressをインストールした時に、初めからインストールされている「Hello Dolly」はオフりました。)

  • AddQuicktag
  • Akismet Anti-Spam (アンチスパム)
  • BackWPup
  • Google XML Sitemaps
  • MetaSlider
  • Ptengine – Real time web analytics and Heatmap
  • SANGO Gutenberg
  • Table of Contents Plus
  • WP Multibyte Patch

AddQuicktag

エディタ画面ですぐにショートコードが出せるよう、登録できるプラグインです。

参考 AddQuicktagで簡単にショートコードを挿入しようサルワカ

このプラグイン自体は「自分でコードを登録してね」という仕様なんですが、SANGOさんの方で「よく使うショートコードを一発で登録できるデータ」を配布しています。神!という訳で下記サイトでダウンロードして追加しましょう!

参考 【WordPressプラグイン】AddQuicktagの設定と使い方KOGLOG

最新エディタ「Gutenberg」が出たばかりということもあり、Gutenbergではショートコードの読み出しボタンが表示されないという問題点があるのですが、SANGOでじわじわと対応してくれているのでひとまずこのプラグインでしのぎましょう!

そのあたりはまた別途記事を書きます。

Akismet

WordPressに標準でインストールされています。
スパムコメントなどを弾くプラグインです。

BackWPup

WordPress のバックアッププラグインです。
もしもの時のためにバックアップ大事!絶対必要!

Table of Contents Plus

目次を入れるためのツール、通称TOC+です。
SANGOにはこの「TOC+」専用のデザインが入っているので、元々あるデザインとぶつからないように設定を変える必要があります。

参考 目次プラグイン「TOC+」の設定方法サルワカ

Google XML Sitemaps

Googleへのサイトマップを送信するために利用します。

Ptengine

アクセス解析系プラグインです。
Google Analyticsと並行して入れておくと、どちらかの解析データがおかしい時に正常なデータを見れるので安心です。

(2019.05.31追記)
無料が月間3000PVまでになってしまったので、実質有料プラグインかな。
Google Analyticsだけで良さそうです。

スライダー系プラグイン

  • MetaSlider
  • Smart Slider 3

TOPページにスライダーを置きたい場合は、このどちらかを入れましょう。

「詳しくないわ〜」という方は、説明が日本語で設定が簡単な「MetaSlider」をインストールして、もっと高度な設定をしたくなったら「Smart Slider 3」に切り替えるのが良いと思います。

WP Multibyte Patch

WordPressをインストールした時に、初めからインストールされているプラグインです。日本語の文字化けとかに対応しているので、有効で良いかと。

6.【延長戦】他テーマからの移行の場合

ここで、自分の作成した記事や固定記事をざっと見てみましょう。
SANGOを導入する前に他のWordPressテーマを使っていた場合、そのテーマ独自のショートコードを使っていた確率が高いです。
つまり、今まで表示されていたところがただの文字になっていたりしま…

なっていましたか。
御愁傷様です。延長戦でございます。

ショートコードなどの置き換えは自動では出来ないので、文字の置き換えプラグインを使ったりして地道に書き換える必要があります。

参考 他テーマからSANGOに移行される方へ(作成中)サルワカ

上記を参考に、「Search Regex」というプラグインを使って修正してください。ファイトです!

まとめ

初期初期設定は以上です!お疲れさまでした!
初級編はこれにて終わりです!
あとは好きにデザインしちゃいましょ〜!!

それではおやすみなさい