WordPress STINGER PLUS+の使い方とカスタマイズ手順

WordPressのテーマ、STINGERですが、めちゃくちゃシンプルで綺麗ですよね。そんなSTINGERの最新版、STINGER PLUS+を最初にセットアップしカスタマイズする手順をご紹介します。ただインストールするだけではなく、メインメニューやサイドバーなどの基本的なパーツがそろった状態にまでもっていきます。

STINGER PLUS+とは?

STINGER PLUS+は非常に人気のあるWordPressのテーマです。とてもシンプルで綺麗な見やすいサイトが作れます。例えば、STINGER PLUS+の公式サイト自体もSTINGER PLUS+が使われていますが、こんな感じのサイトです。

STINGER PLUS+の公式サイト

ぜひ実際このサイトに行ってご覧ください。スマホのサイズにしてみてもいい感じになりますよ。

STINGER公式サイト

こんな感じのサイトが簡単に作れます。

この記事の手順の最終形は?

ただ、STINGER PLUSはただテーマを有効化しただけでは、メインメニューやサイドバーなどのSTINGER PLUSのパーツが表示されません。なので、この記事では、最低限のSTINGER PLUSのパーツを表示し、メニューやサイドバーの内容をカスタマイズする手順をご紹介します。

最終的にはこんな感じになります。

最終形

記事が入ってないのでそっけない感じですが、最低限のメインメニュー、サイドバー、ヘッダー画像が表示できているのがわかるかと思います。あとはご自身で好きな色や画像を使えばかなり素敵なサイトになるはずです。

ダウンロード

※ 2016/11/25追記

次バージョンのSTINGER8が公開されたため、ダウンロードするとSTINGER PLUSではなく、STINGER8がダウンロードされます。(STINGER Plusはもう入手できません)

STINGER8については、 下の記事でレビューしました。

STINGER8の口コミと評判|カスタマイズは激ムズ?

まず下のページからダウンロードします。

STINGER PLUSダウンロードページ

そしてページ中ほどのリンク「規約に同意してダウンロード」からダウンロードします。stingerplus.zipというファイル名になるはずです。子テーマと呼ばれる拡張機能もダウンロードできますが、本手順では使いません。

ダウンロードリンク

インストール

以下の赤枠の部分をクリックしていきます。まず外観から「新規追加」をクリックします。

テーマ新規追加

テーマのアップロード

「ファイルを選択」をクリックして、先ほどダウンロードしたstingerplus.zipを選択します。そして、「今すぐインストール」をクリックします。

テーマの選択

「有効化」したらインストールは完了です。

テーマの有効化

ただ、有効化しただけだと、すごくそっけない感じです。メインメニューやサイドバーに色がない!なので、これから設定をしていきます。

最初の状態

オリジナルテーマカスタマイザーを表示する

STINGER PLUSの設定は、基本的にテーマカスタマイザーというものを使います。テーマカスタマイザーとは、左側に設定画面、右側にユーザーが見る画面が配置され、設定を変更するとリアルタイムで、見た目に反映されると言った機能です。下のような画面です。

カスタマイザーのトップトップ

STINGER PLUSでは、この左側に現れる設定項目がオリジナルのものが用意されています。それを有効にするために、「STINGER設定」から 「オリジナルテーマカスタマイザーを使用する」をチェックし、「SAVE」をクリックします。

オリジナルテーマカスタマイザー

外観からカスタマイズを選択すると、テーマカスタマイザーを開けます。

カスタマイザーを開く

するとオリジナルのテーマカスタマイザーが開きます。

カスタマイザーのトップトップ

メニューを表示する

現状メニューに「サンプルページ」と表示されていますが、これはSTINGERのメニューみたいに色がついていません。なのでSTINGERのメニューを表示していきます。

メニューをクリックします。

click-menu.png

メニューの種類はいくつも作れます。まずはメインメニュー用のメニューを作っていきます。

click-addmenu.png

名前は適当でOKです。

input-menu.png

このメニューの中に表示する項目を追加していきます。

add-item.png

通常の投稿や固定ページなどからなんでも選べます。サンプルページを選んでみます。

select-item.png

ここで一度保存しておきましょう。テーマカスタマイザーでの編集内容は、テーマカスタマイザーを開いている間は消えませんが、保存しないで閉じてしまったり、通常のダッシュボードに戻ってしまうと編集内容が消えてしまいます。なので、こまめに保存しておくのがオススメです。

complete-item.png

まだSTINGERっぽいメインメニューになっていませんよね。理由は色がついていないからです。色をつけていきましょう。

goto-color.png

キーカラーとメインカラーを微妙に違うものにすると、いい感じのグラデーションになったりします。色を決めたら保存しておきましょう。

choose-color.png

なお、色を考えるのがめんどくさい方は、STINGER管理の画面に、デフォルトの色バリエーションが6つ用意されているので、そちらで選んでもらってもOKです。

color-defaults.png

サイドバーを整理する

現状のサイドバーは、「NEW ENTRY」以外は、STINGERっぽくない見た目になっていてごちゃごちゃしています。

dirty-sidebar.png

これをSTINGERらしくするため整理していきます。ウィジェットから行います。

goto-widget.png

goto-sidebartop.png

サイドバートップにあるウィジェットを全て削除していきます。

delete-sidebartop.png

保存しておきましょう。

save-sidebartop.png

サイドバーがすっきりしましたが、「NEW ENTRY」だけがなぜかなくなりません。

neat-sidebartop.png

実は、NEW ENTRYは他のウィジェットと違い、サイドバートップの最下部にデフォルトで表示されるようになっています。(表示しない方法については後述します)

このNEW ENTRYの上にウィジェットを追加したい場合は、サイドバートップに追加します。01_STINGERサイドバーメニューと02_STINGER問合わせボタンを追加してみましょう。

add-widget.png

ちなみに、「0X_STINGER○○○○○○○」というような名前のウィジェットはSTINGERオリジナルのウィジェットなので積極的に使っていきましょう。

02_STINGER問合わせボタンは、タイトルとurlを入力しないと、表示されないので注意してください。ここで一度保存します。

input-inquiry.png

こんな感じになります。01_STINGERサイドバーメニューの所はデフォルトだと、メインメニューと同じ項目内容になります。

comp-sidebartop.png

NEW ENTRYの下にウィジェットを表示したい場合は、「サイドバーウィジェット」にウィジェットを追加していきます。

goto-sidebarwidget.png

アーカイブとカテゴリーを追加してみました。これらは、STINGERオリジナルのウィジェットではないのですが、きちんとSTINGERで決めた色が適用されるようになっています。

add-sidebarwidget.png

これでサイドバーはすっきりしました。

comp-sidebarwidget.png

本手順では、NEW ENTRYを表示したままにしましたが、もし表示したくない場合は、「STINGER管理」にて、「トップページのサイドバーの新着記事一覧を非表示にする」にチェックをいれて「save」してください。

hide-new-entry

ヘッダー画像を変える

ヘッダー画像を変えていきます。

goto-header.png

「新規画像を追加」とすると画像ファイルをアップロードできます。

change-header.png

アップした画像を選択し、右下の「選択して切り抜く」をクリックします。

goto-selectarea.png

すると、ヘッダー画像として使いたい部分を切り抜けます。

select-area.png

こんな感じになります。

complete-header.png

なお、ヘッダー画像の部分をスライドショーにすることもできます。複数の画像が数秒ごとに自動的に切り替わるというものです。こちらは、まずSTINGER管理で「ヘッダー画像をスライドショーで表示する」を有効にします。

slideshow.png

そして、先ほどのヘッダー画像のアップロードのところで、さらに画像を追加していくと、自動的に切り替わるようになります。

フッターのSTINGERサイトヘのリンクを削除する

フッターの部分をよく見ていただくと、下のように「powered by STINGER」という言葉があります。

footer-link.png

これ実はSTINGERの公式サイトへのリンクになっています。なので、このままだとサイトのページすべてからリンクが送られることになります。これはちょっと嫌だなと個人的に思うので、削除してみました。

テーマの編集を開きます。

goto-edit.png

テーマフッターを選択します。

select-file.png

実はこのリンク、JavaScriptを利用して挿入されているので、aタグを消すのではなく、あるクラスを削除することで挿入されないようにします。
下の部分を次のように編集し、更新します。

更新前

1
<p class="copy">Copyright&copy;

更新後

1
<p>Copyright&copy;

edit-file.png

すると「powered by STINGER」という部分は消えます。

complete-footer.png

公式サイトで使われてるヘッダー部分について

お気付きの方もいるかもしれませんが、公式サイトのヘッダー部分のデザインが幅が広くて、画面一杯になっています。また、ヘッダー画像もメインメニューの下にきています。

STINGER PLUS+の公式サイト

こちらは実は、STINGER PLUSでは無理で、上位版のAFFINGER4というテンプレートを使えばできるようになります。

こだわるならAFFINGER4という選択肢も

STINGER PLUSの上位版(有料)として、AFFINGER4というテンプレートがあります。こちらは、名前からわかるようにアフィリエイトに特化したテンプレートになります。とはいえ、アフィリエイト以外のサイトにも役立つような機能がたくさん追加されています。

STINGER PLUSと何が違うの?と疑問に思いますよね。AFFINGER4を実際に購入してしばらく使ってみた感想を下の記事にまとめました。

⇒AFFINGER4Proの実際に使った評判と口コミ

さいごに

いかがでしたでしょうか。STINGERやAFFINGERを使えば、すっきり見やすいサイトが簡単に作れます。

あとはあなたの好きな色、背景、ヘッダー画像、コンテンツを追加していき、素晴らしいサイトを運営していってください!

羊毛や小麦