WordPressテーマ「ストーク」の初期設定と使い方11項目まとめ

「STORK(ストーク)」は初期設定するだけで本格的なWordPressブログが始められる高機能なWordPressテーマです。しかし、この初期設定が初心者にとっては難しく時間がかかったりもします。せっかく、ストークを導入したのに、初期設定でつまづいたら、もったいないですよね? そこでこの記事では、WordPressテーマ「ストーク」を導入したらまずやっておきたい初期設定と使い方11項目についてご紹介します。

これからストークを使い始める方は、この記事を参考にサクッと初期設定を済ませ、記事を書くことにぜひ集中してくださいね。

この記事は2016年11月に公開したものを2018年4月に加筆・修正して更新したものです。

テーマの設定について

30371582_m

最初に、テーマの設定について説明します。ここではまず、ストークの子テーマを導入することがポイントです。

1.子テーマを導入する

①子テーマとは?

子テーマとは親テーマと紐づけされたカスタマイズ用のテーマファイルのこと。例えば、ストークのテーマそのもの(これを親テーマという)をカスタマイズして使用した場合、ストークのテーマを新しいバージョンに更新するたび、カスタマイズした内容はすべて失われてしまいます。これではバージョンアップのたびに大変な労力がかかってしまいますね。これを防ぐために、子テーマというものが必要になってくるのです。


(画像引用元:専用「子テーマ」のダウンロード・解説|OPENCAGE

親テーマと紐づけされた子テーマをWordPressにインストールし、子テーマの方をカスタマイズすれば、親テーマが更新されてもカスタマイズした内容が失われることなく、そのまま反映することができます。よって、WordPressによる継続的なブログ運営をしていきたい場合には子テーマを導入しておくととても便利なのです。

②子テーマを導入する方法

ストークの子テーマは以下のページからダウンロードすることができます。

専用「子テーマ」のダウンロード・解説(OPENCAGE)

ダウンロードした子テーマ(ZIPファイル名「jstork_custom」)をWordPressの管理画面の外観 > テーマ > 新規追加 > テーマのアップロード からアップロードします。

続いて、WordPressの管理画面の外観 > テーマ から、stork_customというテーマを選択するだけです。これで子テーマの導入が完了です。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e5%b0%8e%e5%85%a5

2.FacebookのSDKコードの挿入

Facebookのソーシャルプラグイン(いいね!ボタンなど)を使うためにはSDKコードの挿入が必要になります。Facebookのソーシャルプラグイン機能を使いたい場合は設定しておくことをおすすめします。

SDKコードは、以下のようなFacebookのソーシャルプラグインのページから得ることができます。

ページプラグイン – ソーシャルプラグイン(Facebook)

sdk%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e5%85%a5%e6%89%8b

このSDKコードをWordPressの管理画面の外観 > テーマの編集 の中のテーマヘッダー(header.php)のbodyタグのすぐ下に挿入します。

sdk%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e6%8c%bf%e5%85%a5

これでFacebookのソーシャルプラグインを使う準備ができました。

Facebookのソーシャルプラグインの設定方法について詳しく知りたい方は、以下のサイトを参考にしてください。

これなら出来る!Facebookソーシャルプラグイン設置方法まとめ★具体的な導入手順を徹底解説【保存版】(SMMLab)

カスタマイズの設定

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba

次に、WordPressの管理画面の外観 > カスタマイズ の部分から設定する項目について解説します。ここがサイトデザインに関する基本的な設定になります。

1.トップページ設定

%e3%82%b5%e3%82%a4%e3%83%88%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8

トップページにヘッダー画像やヘッダーテキスト(英語の大テキストと日本語の小テキストの2種類)を使う場合はここから設定します。ヘッダー画像はブログ全体のイメージを決める大切なものなので、効果的な画像をアップしましょう。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%88%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%ef%bc%89

2.グローバル設定

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e8%a8%ad%e5%ae%9a%ef%bc%88%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%ef%bc%89

グローバル設定からトップページのレイアウトを設定することができます。PCとスマホ表示でそれぞれ、好きなレイアウトに設定できます。

僕のブログではカード型というレイアウトを採用していますが、そのほかにシンプル型やマガジン型、ビッグ型というレイアウトがあります。

▼マガジン型
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%88%e3%83%9e%e3%82%ac%e3%82%b8%e3%83%b3%e5%9e%8b%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%ef%bc%89

▼ビッグ型
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%88%e3%83%93%e3%83%83%e3%82%b0%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%ef%bc%89

3.投稿・固定ページ設定

投稿・固定ページ設定では、記事下にFacebookのいいねボックスを表示することができます。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%88%e6%8a%95%e7%a8%bf%e3%83%bb%e5%9b%ba%e5%ae%9a%e3%83%9a%e3%83%bc%e3%82%b8%e8%a8%ad%e5%ae%9a%ef%bc%89

FacebookページのURLを入力すると、以下のようなおしゃれでインパクトのあるいいねボックスが表示されます。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_facebook%e3%81%84%e3%81%84%e3%81%ad%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9

4.アクセス解析コード

Google Analyticsのアクセス解析コードを簡単に挿入することができます。

また、Google Search Console(旧Google ウェブマスターツール)のコードなど、テーマヘッダー(header.php)に挿入したいタグやコードがあればここから設定することができます。

これで面倒なタグ設定も一発OKですね。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%88%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e8%a7%a3%e6%9e%90%e3%82%b3%e3%83%bc%e3%83%89%ef%bc%89

5.サイトロゴ・アイコン

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e8%a8%ad%e5%ae%9a%ef%bc%88%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b3%e3%81%ae%e8%a8%ad

ここではブログのファビコンを設定します。ストークでは初期設定で「J」という文字のファビコンが設定されていますが、これを自分のブログにあったファビコンに変更します。

▼オリジナルのファビコンに設定
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%88%e3%82%b5%e3%82%a4%e3%83%88%e3%83%ad%e3%82%b4%e3%83%bb%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3_%e3%83%95

▼変更後のファビコン
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e8%a8%ad%e5%ae%9a%ef%bc%88%e3%83%95%e3%82%a1%e3%83%93%e3%82%b3%e3%83%b3%e3%81%ae%e8%a8%ad

メニューの設定

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba_%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e8%a8%ad%e5%ae%9a

WordPressの管理画面の外観 > メニュー の設定についてです。ここでは、ヘッダー部分に表示されるグローバルメニュー(PCおよびスマホ表示)とフッターメニューを設定します。

▼グローバルメニュー
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%b0%e3%83%ad%e3%83%bc%e3%83%90%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc

▼フッターメニュー
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc

メニューの設定の方法については以下の記事を参考にしてください。

WordPressのナビゲーションメニューを設定する方法 – バズ部

メニューの位置(グローバルメニューおよびフッターメニュー)の指定は「位置の管理」という項目から行うことができます。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc_%e4%bd%8d%e7%bd%ae%e3%81%ae%e7%ae%a1%e7%90%86

ウィジェットの設定

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%81%ae%e8%a8%ad%e5%ae%9a

続いて、WordPressの管理画面の外観 > ウィジェット の設定です。WordPressテーマ「ストーク」では、かなり細かくウィジェットを設定することができます。

PCのメインサイドバー、記事タイトル下、記事コンテンツ下、トップページ上部・下部、フッターなどかなり豊富なウィジェットスペースがあります。これに加え、スマホ表示専用のウィジェットスペースもあります。

▼PC表示時のウィジェットスペース(一部)
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88_pc%e7%89%881

▼スマホ表示時のウィジェットスペース(一部)
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b9_%e3%82%b9%e3%83%9e%e3%83%9b1
%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%a6%e3%82%a3%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88%e3%82%b9%e3%83%9a%e3%83%bc%e3%82%b9_%e3%82%b9%e3%83%9e%e3%83%9b2

ディスカッションの設定

48189083_m

ブログ上でコメントのやりとりをするときなどに表示されるアバター(プロフィール画像)ついて設定します。WordPressの管理画面の設定 > ディスカッション の中の「アバター」という項目で、「アバターを表示する」にチェックを入れます。アバターを表示させる方法にはいろいろありますが、僕はGravatarロゴを利用して表示しています。

Gravatarによるアバターの設定方法については以下の記事を参考にしてください。

WordPressテーマ「ストーク」では、アバターを表示する設定にしておくと、記事下のプロフィール欄にアバターが表示されるようになります。ちなみに、ここに表示されるプロフィール文章は、WordPress管理画面のユーザー > あなたのプロフィール に記入している内容がそのまま反映されるようになっています。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%83%97%e3%83%ad%e3%83%95%e3%82%a3%e3%83%bc%e3%83%ab%e3%82%a2%e3%83%90%e3%82%bf%e3%83%bc%e8%a1%a8%e7%a4%ba

スライダーの設定

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e8%a1%a8%e7%a4%ba

最後に、トップ画面に表示されるスライダーの設定について説明します。

設定方法は、スライダーに表示させたい記事に「pickup」というスラッグ名でタグ付けするだけでOKです。タグ付けされた記事が自動でスライダーに表示されるようになります。

%e3%82%b9%e3%83%88%e3%83%bc%e3%82%af_%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc_%e3%82%bf%e3%82%b0%e8%a8%ad%e5%ae%9a

以上、WordPressテーマ「ストーク」の初期設定11項目についてでした。この11項目の基本設定を押さえておけば、ストークをスムーズに使い始めることができますので参考にしてください。

WordPressテーマ「ストーク」

あわせて読みたいストーク関連記事

以下の記事は、ストークに関する記事です。興味がある記事からご覧ください。

1.ストークに入れておきたいおすすめプラグインのまとめ記事

2.ストークを使っているサイトデザイン集

3.ストークのサイト表示速度を高速化した5つの方法

シェア&フォローしてくれるとうれしいです。

コメントを残す

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

CAPTCHA


ABOUT US
Kazpa
1981年4月、熊本県生まれ。現在、大分市在住。妻と子ども3人(小学5年・3年・5歳の男の子)の5人暮らし。趣味はサッカー、読書、インターネット、ブログ、その他面白い話題を見つけること。好きな食べ物はチョコとコーヒーです。よろしくお願いします。