【ワードプレス】旧ストークの基本的なカスタマイズ方法【STORK】

STORK(ストーク)とは少し前に流行った有料のワードプレステーマです。今は新作の『STORK19』ってのが10000円ぐらいで出てますね。まあ僕は今のところバージョンアップするつもりはないのでザックリ旧ストークの使い方というか、大体こんな事が出来ますよ的なモノを解説しときます。

 

親テーマと子テーマ

どのワードプレステーマでも共通で、絶対に知っておかなくてはならない約束事があります。それが親テーマと子テーマの存在です。

親テーマは復元ポイント(バックアップデータ)と覚えればいいです。基本的に触っちゃダメな部分です。復元ポイントが壊れてしまったら戻せませんからね。

じゃあカスタマイズするにはどうすればいいのか?って部分で子テーマが登場します。稀に子テーマの用意されてない場合もありますが、99%ぐらいはちゃんと子テーマも存在します。子テーマに関しては完全無料配布です。

さきほども言いましたが親テーマでのカスタマイズミスは許されません(ここで言うカスタマイズはPHP編集の事)初心者の方はまだ分からないかもしれませんが、いずれ触る時が来ると思います。このPHP編集をミスるとワードプレスにログインすらできなくなったりします。僕も実際PHPいじくって大変な思いをしました。

まあそれだけなら『僕はPHPなんて一生触らないので親テーマで行きます』って方もいらっしゃると思いますが、親テーマがアップデートした時に全てのカスタマイズ(PHPはもちろんCSSも)が初期化する可能性があるのです。何十時間もかけて作り上げたサイトがいきなり初期化されたら鬱になりますよ。

親テーマがアップデートされても子テーマまでは干渉されないので、ストーク以外のテーマでも必ず子テーマでサイトを運営してください。これはもう常識です。

なんか偉そうにいってますが僕は親テーマを全力でカスタマイズしました。だって知りませんもん、子テーマの存在なんて。急いで導入したものの親テーマのカスタマイズは子テーマに反映されません。同じ作業を1から全部やり直しですよ。ここがインドならガンジス川に放り込んでます。

 

子テーマを導入

ストークを購入したら『jstork.zip』がダウンロードできるようになります。これが親テーマです。更にワードプレスにインストールすれば親テーマは終わり。

【ダッシュボード▼左メニュー▼外観▼テーマ▼新規追加▼テーマのアップロード▼jstork.zip を選択▼インストール】でインストールできます。

 

親テーマのインストールが終わったら次は子テーマをダウンロードします。【ストークの子テーマ配布サイト】に移動して『ストーク用・jstork_custom.zip』をダウンロード。あとは親テーマ同様、ワードプレスにインストールします。

【ダッシュボード▼左メニュー▼外観▼テーマ▼新規追加▼テーマのアップロード▼jstork_custom.zip を選択▼インストール】

 

最後に必ず『jstork_custom』つまり子テーマを有効化してください。

【有効:stork_custom】と表示されている事を確認して先に進みます。ここで親テーマを有効化しては何の意味もありません。子テーマです子テーマ。

 

ストークをカスタマイズする

【ダッシュボード▼左メニュー▼外観▼カスタマイズ】カスタマイズメニューが表示されます。今回はこのカスタマイズメニューをザックリ解説します。

 

サイトカラーを設定する

現時点ではストークデフォルトの配色になってますが、ほとんどの配色(全21箇所)は変更できます。逆に色が変えれない箇所も存在します。これから紹介する項目でもストークで用意されているカスタマイズには限界がありまして、限界を突破するためにはCSSやPHPをいじる必要がでてきます。

 

タイトル下にテキストリンクを作成する

【グローバル設定▼ヘッダー下お知らせテキスト】ヘッダーはサイトの上部の事を指します。逆に下部はフッターって言います。

この項目をいじると『タイトルの真下にお知らせテキストリンク』を作成する事ができます。上図参照『あああ』と表示されている赤い帯のがそうです。まあこんな事も出来ますよって感じでどんどん進みます。

 

ヘッダーに画像を表示する

【トップページ設定▼ヘッダー背景画像▼好きな画像をアップロード】するとサイトの看板みたいな感じで画像が表示されます。

 

タイトル背景の幅を広げる

【グローバル設定▼ヘッダー背景設定▼コンテンツ幅になっているボタン▼フルサイズ(横幅いっぱい)に変更】すると横幅いっぱいに広がります。

 

SNSボタンを設置する

記事の上下にSNSボタンが付いており、記事が長くなればなるほどボタンの間隔が広がります。邪魔なら【投稿・固定ページ▼SNSボタンを表示しないにチェック】で非表示にできます。

デフォルトではSNSボタンが表示されるのは投稿ページのみです。固定ページでも表示させたい時は【投稿・固定ページ▼固定ページでもSNSボタンを表示するにチェック】

 

コンテンツ内のアイキャッチ画像を非表示

記事を投稿する際に1つだけアイキャッチ画像が設定できます。記事の顔になるので多少面倒ですが記事ごとに1つ1つ設定した方が見やすいです。

アイキャッチ画像を設定した場合、記事コンテンツのトップにも連動して同じ画像が表示されます。これも邪魔であれば【投稿・固定ページ▼アイキャッチ画像を非表示にチェック】で非表示にできます。新着記事(トップページ)では表示させたいけど、コンテンツ内には表示させたくないという場合には利用してください。

 

この記事を書いた人を非表示にする

【ダッシュボード▼左メニュー▼ユーザー▼あなたのプロフィール】を入力すれば、全ての記事の下へ自動的に『この記事を書いた人』と『このライターの最新記事』が表示されます。プロフィールを書かなければ何も表示されません。もし別のプラグインを使って『この記事を書いた人』を表示させたい場合は【投稿・固定ページ▼記事下に投稿者情報を表示しないにチェック】して非表示にする必要があります。

 

 

更新日を非表示にする

デフォルトでは『投稿日のみ表示する』になっているはずなのに、なぜか『更新日』まで表示される事があります。そんな時は設定しなおせば消えます。両方非表示にする事も可能です。【投稿・固定ページ▼投稿日・更新日表示設定▼好きな表示方法を選択】

 

記事下に『facebookいいねボックス』を表示する

フェイスブックのアカウントを持っているのであれば記事の下にカッコイイボックスも表示できます。フェイスブックのURLを入力するだけで自動的に作成されます。【投稿・固定ページ▼記事下にfacebookいいねボックスを表示▼フェイスブックのURLを入力】

 

 

メニューを作成する

サイト最上部にグローバルナビ、サイト最下部にフッターナビを表示する事ができます。カスタムリンク・固定ページ・記事・カテゴリー・タグなど自由な組み合わせで好きなメニューを作る事ができます。

表示される名称は好きに変える事ができます。ほとんどが内部リンクになると思いますが、カスタムリンクを使うとURL指定で外部へも飛ばせます。

 

ウィジェットを設定する

ウィジェットを使えばコンテンツ外のカスタマイズが可能です。全て説明するとかなり複雑になるので頭が水素爆発します。自分でいじってみた方が知識がつくと思うので、特殊なワードだけ説明しておきます。

【PC】パソコンにだけ表示されるウィジェット

【SP】スマートフォンにだけ表示されるウィジェット

【ハンバーガーメニュー】スマホでサイトにアクセスした場合のみ、左上に三本ラインのボタンが表示されます。これをタップするとハンバーガーメニューが表示されます。

 

【フッター】繰り返しになりますが、サイト最下部をフッターと言います。この部分には最大3つのウィジェットを設置する事ができます。サイト最上部をヘッダーと言いますが、ウィジェットでヘッダーに手を加える事はできません。

 

もっと細かくウィジェットを設定する

実は今いじくってるカスタマイズ画面のウィジェット設定(ライブプレビュー)では細かい設定ができません。更に細かい設定をするにはウィジェット専用の画面にアクセスする必要があります。

【カスタマイズ画面▼公開をクリック▼ダッシュボードへ戻り▼左メニュー▼外観▼ウィジェット】カスタマイズ画面から移動する際にはかならず公開を押してください。公開を押さずに移動すると今までのカスタマイズが保存されません。

 

ウィジェット画面では『アフェリエイトの広告などを表示する場所』なども細かく設定できます。どんなに無茶苦茶してもぶっ壊れる事は無いので安心してください。それでも奇跡的に異常が出たらウィジェットを消すだけで復旧します。

 

 

タイトルロゴを設置する

【サイトロゴ・アイコンの項目】ではブログの顔となるタイトルロゴを設置できます。タイトルロゴってのは画像で設定します。先ほどまで『新しいブログサイト』と表示されていたテキスト部分と、任意の画像を入れ替えます。テキストと画像の両方を表示するのは不可能です。

 

ファビコン・アイコンを設定する

ファビコンとはブラウザのタグに表示される小さなアイコンの事で、何か特別な理由が無い限りは1つの画像を使いまわしでOKです。正方形のアイコンを自作するか、どっかのフリー素材からパクってきてください。アップロードすればすぐに反映されます。

 

トップページ上部にスライドショーを作成

このスライドショーが表示されるのはトップページのみです。とりあえずこれを付けとくと華やかさはアップするし、設置法もめちゃくちゃ簡単なので一度やってみてください。覚えとけばいつでも使えます。【ダッシュボード▼投稿▼ビジュアルエディタ▼右メニュー▼タグ▼『pickup』と入力▼確定▼更新】

 

まあザっとこんな感じです。あらかたのカスタマイズが終われば記事作成に入っていくんですが、なんとワードプレスの記事編集はむちゃくちゃ使いにくいんですよ。という事で次は『ストレスなく記事を書ける環境』を作らなくてはなりません。