STORK(ストーク)のトップページのカスタマイズ方法全部教えます!



どうも、takaです(^^♪

今回はブログのお話(^^)/

今月2018月1末に本ホームページ「E-VBA」のトップページをカスタマイズしました(^^♪
本サイトのトップページはこちら

前々からお話ししておりますが、本サイトはWordpressで作成しており、有料のテーマ「STORKストーク」を使用しております(^^♪

このストークは標準仕様でも素晴らしいテーマですが、やはりブログのテーマだけあってどうしてもブログのトップページになってしまいます(;^ω^)

そこで私はトップページのみオリジナルのページを作成しようと思い立ったのです(^^)/

という訳で今回は私自身がカスタマイズした「STORKストークのトップページのカスタマイズ方法」を全部教えます!

私はVBA以外のプログラム知識はほとんど持っておりませんので素人の方でも問題なくカスタマイズできると思います(^^)/

(※この記事は長文です、読みづらいかもしれませんがご了承ください)

STORKストークトップページカスタマイズ1「トップページ用の固定ページを作成」

では、まずトップページのもととなる「固定ページ」を作成していきましょう!

WordPressのメニューから固定ページ→新規作成をクリックしてください(^^)/

新規作成ページから「固定ページの属性」のテンプレートを「デフォルト」から「サイドバーなし」に変更してください・

トップページなので「タイトルはなし」で下書き保存しておきましょう(^^♪

1カラムとは

1カラムとはサイドバーが非表示になるページ構成のことです。

現在の状態1

今のところ、このような状態になっていると思います。サイドバーもなく、こざっぱりしてさみしい状態です。


STORKストークトップページカスタマイズ2「メニューの作成」

続いてはトップページに表示する↓のようなメニューを作成していきましょう(‘◇’)ゞ

記事を3カラムにする

上記画像のように3つの列でコンテンツを分けるには「STORKストーク」で初めから用意されている「ショートコード」を使います(^^)/

STORKストーク」のショートコード公式解説はこちら

1カラム

2カラム

3カラム

これで3つのカテゴリーが出来ました。実際記載されているコードは下記のようになっています。

メニュー画像を追加

メニューの画像の調達はフリー素材のサイト「写真AC」を利用しています(^^♪

フリーの画像をペイントやらExcel、ウェブ上で画像編集できるサイトで編集しました(^^♪

コード中の「ここに画像」のところに画像を挿入してください(^_-)-☆

現在の状態2

この状態になっていなかったらどこかコードが間違っています(;^ω^)


各メニュー画像下の部分を作成

画像が追加出来たところで次に画像下の最新の投稿の部分を作成していきます(^^)/

この部分の灰色のボックスには「STORKストーク」のBOX作成のショートコードを使用します!

そして気になるはずの最近の投稿の部分、この部分は「Shortcodes Ultimate」というプラグインを使用して自動で反映するように設定してあります、「Shortcodes Ultimate」は様々な機能を持ったショートコードが用意されているプラグインで、プログラム知識が無くても工夫するだけでかなりの事が可能になります(^^)/

Shortcodes Ultimate」をインストールして有効にすると投稿ページに赤枠のようなボタンが表示されます。

 

ボタンを押すと多くの項目が表示されますが今回は「投稿」を選択してください!

「投稿」を選択するとショートコード作成の項目になります。私の設定はこのようにしてあります。

項目名解説
ページあたりの投稿数ショートコードで表示する項目数
投稿タイプどのタイプのページを取得するか設定
タグソノミー↓「条件」の選択肢
条件抽出条件「タグ」や「カテゴリー」から選択可能
順序表示する順番
表示する順番の条件
投稿ステータス「公開」「非公開」など抽出する条件を指定

このコードを先ほどの「3カラム」のショートコードと「STORKストーク」の「ボタンショートコード」組み合わせて公開すると(↓ボタンのショートコード見本)



このように表示されます!だんだんメニューぽくなってました(^^♪

現在の状態3

最新の投稿を画像でトップページに表維持させる

さてこれでデザイン面では最後となるこの最新の投稿の部分です。

この部分も先ほどご紹介した「Shortcodes Ultimate」というプラグインを使用して作成しています!

先ほどは「投稿」で作成しましたが、今度は「ギャラリー」のショートコードを作成します!

「ギャラリー」はリンク先を設定した画像を表示できます。

下記の画像はE-VBAで使用している設定ですのでよろしければ参考にしてください!

項目名解説
ソース表示させる画像の取り出すソースを設定
制限ギャラリーで表示させる画像の数を表示
リンク画像をクリックしてアクセスする先を設定
表示させる画像の幅を設定
高さ表示させる画像の高さを設定
タイトルの表示画像のタイトルや投稿のタイトルを表示させるタイミングを設定

作成したショートコード、とボタンを組み合わせることで新着記事とその前の記事の入り口が完成しました!

過去記事一覧のページの作成補法は下記にて紹介しています。

ギャラリーはレスポンシブなので、この記事では幅が狭くなってしまい、PCでは表示が崩れてしまっているかもしれません(;^ω^)

メニュー完成!イメージ図

とりあえずこれでデザイン自体は完成となります(;^ω^)

STORKストークトップページカスタマイズ3「固定ページ公開」

作成した固定ページをトップページとして設定をしていきましょう!

外観→カスタマイズを選択
ホームページ設定→ホームページの表示→最新の投稿から固定ページへ切り替える

切り替え後に表示された「ホームページタブから先ほど作成した固定ページ(タイトルなし)を選択してください!

STORKストークトップページカスタマイズ3「投稿一覧ページの作成」

固定ページをトップページに設定すると、今まで表示されていた記事一覧ページが見られなくなってしまいます(;^ω^)

今までどおりの記事が並んでいるページも必要ですよね、記事一覧を表示させるページも固定ページで作成します!

作成するといっても手順はすごく簡単で、適当なタイトルとパーマリンクを設定するのみでOKです。

私の場合は記事タイトル:「記事一覧」パーマリンク:「blog」としました。

設定が終了したら、本文には何も記入せずそのまま公開ボタンをクリックして準備はおしまいです。

あとはホームページ設定の「投稿ページ」から作成した「記事一覧」を設定することによって記事一覧ページの作成完了となります!

過去記事一覧のリンク先もこのページになりますので作成しておくと便利です!

記事一覧ページのイメージ

記事一覧のページはこのように表示されます。

カスタマイズ終了

以上「「STORKストーク」トップページのカスタマイズ方法全部教えます!」でした!STORKストークには便利なショートコードがたくさんあり、webプログラムの知識が無くても綺麗なブログ作りが可能になってます(^^♪

私なりに考えてカスタマイズしましたが、webプログラムの知識はほぼ0なので本職の方と比べると見劣りするかもしれませんが是非参考までにご活用ください(^^)/

STORKストークは値段が10800円と決して安くはないと思いますが、このテーマはとっても使いやすいテーマだと思います(^^)/

ファイルやコードの利用について

サンプルコードなどは当サイトの免責事項をよくお読みになってからお使いください。

Twitterフォロー

 

ブログの更新通知を受け取るにはこちらにはこちら↓Twitterもやってます(^^♪Excelについてはあまり触れませんがブログの更新のお知らせはツイートしています(^^♪

Twitterフォロー

 



コメントを残す

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

ABOUTこの記事をかいた人

あることがキッカケでVBAを独学で勉強している、非IT企業の会社員。 今はVBAで出来ることを模索しながら別の開発言語の取得、基本情報技術者試験合格が目標