【WordPress】SANGOカスタマイズしてみました【ブログ】

相談者

SANGOテーマを導入してみたけど、カスタマイズの幅を広げたい。あと、Google Adsenseの設定とかも、簡単にやっていきたい。

今回は、このような悩みを解決していきます。

本記事の内容

  • SANGOのカスタマイズ例
  • おすすめの子テーマ「PORIPU」で幅広い設定を可能にする
注意
この記事では、有料テーマである「SANGO」を前提にお話ししていきます。

すでにSANGOをお使いの方、これから導入を検討されている方におすすめの内容です。

それでは早速見ていきましょう。

SANGOのカスタマイズ例

今回やっていきたいカスタマイズは、大きく分けて2点あります。

  1. カテゴリ別のメニューを設置
  2. ライトナビゲーションに自己紹介欄を設置

これらを順に設定していきます。

1.ヘッダーにカテゴリ別メニューを設置

まずはこちらからです。

ヘッダーにカテゴリ別メニューを追加していきます。

現在のTOP画面は、記事一覧がただ並んでいるだけで、どんな種類の記事がどこにあるのか分かりづらくなっています。

そこで、ヘッダー部分にカテゴリ別のタブを用意し、それぞれの記事をカテゴリ内へ配置していきたいと思います。

イメージはこのような感じに仕上げます。

まずはWordPressの管理画面に入り、「サイトをカスタマイズ」します。

すると、本番環境(ユーザーがみる画面と同じ画面)になります。

次に、レフトメニューの上から4番目にある「SANGOオリジナル機能」をクリック。

中に入ったら、レフトメニュー最上部の記事一覧タブ切替(トップページ)を押します。

中をみると、「タブ1」「タブ2」の項目があるので、それぞれ表示させたい項目の名称を入れていきます。

僕は、「NEW」「BLOG」「Affiliate」「計画」と分類してみました。

いつでも変更可能なので、まずは入力して見ましょう。

タブ1に関しては、デフォルトで新着記事が出るようになっています。

しかし、タブ2以降に関しては、「どのように分類するか」を決める必要があります。

設定メモ
カテゴリーIDかタグIDで管理できるよ!自分が管理しやすい方でOKだよ。

僕は普段カテゴリーで分類分けをしているので、「カテゴリID」で管理することにしました。

「タブ2にカテゴリID」を入れる必要がありますが、カテゴリIDが分かりません。

そこで、このように調べます。

管理画面のレフトメニューに「カテゴリー」とあるので、ここの中に入ると、右側にカテゴリーが表示されます。

調べたいカテゴリーIDの上にマウスをホバーすると、下の方にURLでカテゴリIDが表示されたのが分かります。

ここでは、「6」ということが分かりました。

同様にタブ3、タブ4にも名称とカテゴリーIDを入力し、「公開」をクリック。

ページ上部にカテゴリー一覧が追加されました!

正確にはヘッダーではありませんが、こっちの方が分かりやすそうだったので、記事一覧はこの形式でしばらくいきます。

それぞれにきちんと記事が入っているか確認すると、問題なさそうです。

無事に記事のカテゴリ分類設定が完了しました。

2.ライトナビゲーションに自己紹介欄を設置

次は、ライトナビゲーション(右側)に自己紹介欄を追加して見たいと思います。

現在の表示は、検索BOX、最近の投稿、コメント欄になっています。

コメント欄は不要のため、削除してその代わりに自己紹介を追加していきたいと思います。

まずは、ウィジェットをいじっていきます。

同じくレフトメニューの「ウィジェット」を押します。

次に、一番上の「サイドバー」をクリック。

僕の場合は、コメント欄は不要のため、こちらのコメント欄の中を開き、削除を選択。

コメントが削除できたら、次は右下の「ウィジェットを追加」から、追加したい項目を選択します。

テキストベースで入力できるものが良いので、「テキスト」を選択。

任意のテキストを入寮します。同時に、右側にも注目し、入力したテキストがどのように入っているのか確認します。

きちんと入っていますね。

入力完了したら、先ほど同様「公開」ボタンで更新します。

コメントが追加されていることが分かります。

なお、ここには写真や画像も追加できるようなので、アイコンができたらこちらに追加していきたいと思います。

これで、右側に自己紹介欄を追加することができました。

3.おすすめの子テーマ「PORIPU」を設定してみる

ここでは、「PORIPU」を導入し、設定していきます。

そもそも「PORIPU」とは?という方が多いと思うので、簡単にご紹介します。

PORIPUとは?

・SANGO公認の子テーマで、SANGOに更に拡張性を持たせた有料の子テーマです。

・簡単にカスタムできるので、これからSANGOをどんどんカスタマイズしていきたい!と思っている方向けの、カスタム時間を省ける子テーマです。

こちらの記事が分かりやすいので、理解を深めるためにぜひ見てみてください。

そもそも、なぜPORIPUを導入しようと思ったのか?

元々、Google Adsenseの設定をしようと思っていたけど、やり方を調べていたらこの「POLIPU」の存在を知りました。設定も簡単にできそうだし、表現力も格段に上がりそうなので、投資していることにしました!

POLIPUでできること

開発者のマサオカブログさんの記事を要約すると、下記のことが可能になります。

SANGOのデザイン種類を豊富にし、広告表示設定を楽にし、プラグイン導入は自動でSANGO仕様になるので時短できるよ!

設定の時間を早く楽にできるだけでもう魅力的ですよね。

時間をお金で買っているようなものです。

早速導入していきましょう。

こちらのサイトにアクセスし、購入画面を選択します。

2種類ありますが、上の「tears」はアフィリエイト用にさらに機能を追加したものです。

tears版

・商品ランキング

・FontAwesome5対応

・新吹き出し

これらが追加されたものだよ!

ここでの注意点は、通常盤を購入したらからといって、差額を払えばアップグレードできるかというとそうではありません。

新たに購入し直す必要があるので、アフィリエイトを検討されている方は最初からtears版を購入するようにしましょう!

レジへ進み、注文内容を確認します。

注文確定ボタンを押し、確定したことを確認します。

注文確定後、「ダウンロード」ボタンを押すと、このようにZIPファイルがダウンロードできるページがあります。

ここからファイルをダウンロードし、テーマを設定します。

テーマの設定方法に関しては、別記事で書いていくのでそちらをご覧ください!

さて、下書きを見てみると、サムネイルがPORIPU画像に変更されているのが分かります。

POINT

管理画面でサムネイルが出るのは、PORIPUだからだよ!

あと、「記事ID」も表示されてて分かりやすいね!

無事にテーマ反映ができました。

SANGOでは、Classicエディターのみの対応でしたが、PORIPUでGutenbergエディタに完全対応しているとのこと。

早速エディターをGutenbergに戻して使って見ます。

分かりますでしょうか?

直感的に打てて、かつスタイルを追加するのも楽にできそうです!

追加デザイン
このデザインも追加されたよ!
追加デザイン
このデザインも追加されたよ!
ここに文字を入れる あああ
ここに文字を入れる 変更可能
ここに文字を入れるカスタム
ここに文字を入れる いい感じ
  • こんな感じ
  • こんな感じ
  • こんな感じ
  • こんな感じ
  • こんな感じ

ブログを書く上で、楽しくなるようなデザインにして、読んでもらえるように工夫していきたいですね。

SANGO×PORIPU、おすすめです。

長くなりましたが、この記事は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です