WordPressテーマ「ストーク」の初期設定でやっておきたい11項目まとめ

WordPressテーマ「ストーク」を使い始めて約1か月が経ちました。今回は、WordPressテーマ「ストーク」を導入したらまずやっておきたい初期設定11項目について説明します。

2016年12月1日、ブログ名を「PICNEWS」から「Let’s Blog Life」に変更しました。当記事はブログ名を変更する前に執筆したものですのでご了承ください。

1.テーマの設定について

30371582_m

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

①子テーマを導入する

子テーマとは?

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

親テーマと紐づけされた子テーマを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

②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)

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

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

①トップページ設定

%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

②グローバル設定

%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%82%ab%e3%83%bc%e3%83%89%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%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

③投稿・固定ページ設定

投稿・固定ページ設定では、記事下に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

④アクセス解析コード

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

⑤サイトロゴ・アイコン

%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

3.メニューの設定

%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

4.ウィジェットの設定

%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

5.ディスカッションの設定

48189083_m

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

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

信頼度アップ!WordPress のアバター画像の設定方法 – バズ部

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

6.スライダーの設定

%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テーマ「ストーク」

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

1981年4月、熊本県生まれ。現在、大分市在住。妻と子ども2人(3歳と1歳の男の子)の4人暮らし。趣味はサッカー、読書、インターネット、ブログ、その他面白い話題を見つけること。その他関心がある分野は、小説執筆とコーチングです。最近では、子どもと一緒に機関車トーマスのプラレールにハマっています。好きな食べ物はチョコとコーヒーです。SNSでフォローしていただくと最新記事を読むことができます。よろしくお願いします。