ページコンテンツ
どうも、takaです(^^♪
今回はブログのお話(^^)/
今月2018月1末に本ホームページ「E-VBA」のトップページをカスタマイズしました(^^♪
本サイトのトップページはこちら
前々からお話ししておりますが、本サイトはWordpressで作成しており、有料のテーマ「STORK」を使用しております(^^♪
このストークは標準仕様でも素晴らしいテーマですが、やはりブログのテーマだけあってどうしてもブログのトップページになってしまいます(;^ω^)
そこで私はトップページのみオリジナルのページを作成しようと思い立ったのです(^^)/
という訳で今回は私自身がカスタマイズした「STORKのトップページのカスタマイズ方法」を全部教えます！
私はVBA以外のプログラム知識はほとんど持っておりませんので素人の方でも問題なくカスタマイズできると思います(^^)/
(※この記事は長文です、読みづらいかもしれませんがご了承ください)
STORKトップページカスタマイズ1「トップページ用の固定ページを作成」
では、まずトップページのもととなる「固定ページ」を作成していきましょう！
WordPressのメニューから固定ページ→新規作成をクリックしてください(^^)/
新規作成ページから「固定ページの属性」のテンプレートを「デフォルト」から「サイドバーなし」に変更してください・
トップページなので「タイトルはなし」で下書き保存しておきましょう(^^♪
1カラムとはサイドバーが非表示になるページ構成のことです。
現在の状態1
今のところ、このような状態になっていると思います。サイドバーもなく、こざっぱりしてさみしい状態です。
STORKトップページカスタマイズ2「メニューの作成」
続いてはトップページに表示する↓のようなメニューを作成していきましょう(‘◇’)ゞ
記事を3カラムにする
上記画像のように3つの列でコンテンツを分けるには「STORK」で初めから用意されている「ショートコード」を使います(^^)/
「STORK」のショートコード公式解説はこちら
1カラム
2カラム
3カラム
これで3つのカテゴリーが出来ました。実際記載されているコードは下記のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | [colwrap] [col3] カラム [/col3] [col3] 2カラム [/col3] [col3] 3カラム [/col3] [/colwrap] |
メニュー画像を追加
メニューの画像の調達はフリー素材のサイト「写真AC」を利用しています(^^♪
フリーの画像をペイントやらExcel、ウェブ上で画像編集できるサイトで編集しました(^^♪
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | [colwrap] [col3] 1カラム ここに画像 [/col3] [col3] 2カラム ここに画像 [/col3] [col3] 3カラム ここに画像 [/col3] [/colwrap] |
コード中の「ここに画像」のところに画像を挿入してください(^_-)-☆
現在の状態2
この状態になっていなかったらどこかコードが間違っています(;^ω^)
各メニュー画像下の部分を作成
画像が追加出来たところで次に画像下の最新の投稿の部分を作成していきます(^^)/
この部分の灰色のボックスには「STORK」のBOX作成のショートコードを使用します！
そして気になるはずの最近の投稿の部分、この部分は「Shortcodes Ultimate」というプラグインを使用して自動で反映するように設定してあります、「Shortcodes Ultimate」は様々な機能を持ったショートコードが用意されているプラグインで、プログラム知識が無くても工夫するだけでかなりの事が可能になります(^^)/
「Shortcodes Ultimate」をインストールして有効にすると投稿ページに赤枠のようなボタンが表示されます。
ボタンを押すと多くの項目が表示されますが今回は「投稿」を選択してください！
「投稿」を選択するとショートコード作成の項目になります。私の設定はこのようにしてあります。
| 項目名 | 解説 |
|---|---|
| ページあたりの投稿数 | ショートコードで表示する項目数 |
| 投稿タイプ | どのタイプのページを取得するか設定 |
| タグソノミー | ↓「条件」の選択肢 |
| 条件 | 抽出条件「タグ」や「カテゴリー」から選択可能 |
| 順序 | 表示する順番 |
| 順 | 表示する順番の条件 |
| 投稿ステータス | 「公開」「非公開」など抽出する条件を指定 |
1 2 3 4 5 | [box class="glay_box" title="【Excel基礎】最新の投稿"] [su_posts template="templates/list-loop.php" posts_per_page="3" tax_term="77" order="desc"] [/box] |
このコードを先ほどの「3カラム」のショートコードと「STORK」の「ボタンショートコード」組み合わせて公開すると(↓ボタンのショートコード見本)
1 | [btn class="simple"]シンプルボタン[/btn] |
1カラム
2カラム
このように表示されます！だんだんメニューぽくなってました(^^♪
現在の状態3
最新の投稿を画像でトップページに表維持させる
さてこれでデザイン面では最後となるこの最新の投稿の部分です。
この部分も先ほどご紹介した「Shortcodes Ultimate」というプラグインを使用して作成しています！
先ほどは「投稿」で作成しましたが、今度は「ギャラリー」のショートコードを作成します！
「ギャラリー」はリンク先を設定した画像を表示できます。
下記の画像はE-VBAで使用している設定ですのでよろしければ参考にしてください！
| 項目名 | 解説 |
|---|---|
| ソース | 表示させる画像の取り出すソースを設定 |
| 制限 | ギャラリーで表示させる画像の数を表示 |
| リンク | 画像をクリックしてアクセスする先を設定 |
| 幅 | 表示させる画像の幅を設定 |
| 高さ | 表示させる画像の高さを設定 |
| タイトルの表示 | 画像のタイトルや投稿のタイトルを表示させるタイミングを設定 |
作成したショートコード、とボタンを組み合わせることで新着記事とその前の記事の入り口が完成しました！
ギャラリーはレスポンシブなので、この記事では幅が狭くなってしまい、PCでは表示が崩れてしまっているかもしれません(;^ω^)
メニュー完成！イメージ図
とりあえずこれでデザイン自体は完成となります(;^ω^)
STORKトップページカスタマイズ3「固定ページ公開」
作成した固定ページをトップページとして設定をしていきましょう！
切り替え後に表示された「ホームページタブから先ほど作成した固定ページ(タイトルなし)を選択してください！
STORKトップページカスタマイズ3「投稿一覧ページの作成」
固定ページをトップページに設定すると、今まで表示されていた記事一覧ページが見られなくなってしまいます(;^ω^)
今までどおりの記事が並んでいるページも必要ですよね、記事一覧を表示させるページも固定ページで作成します！
作成するといっても手順はすごく簡単で、適当なタイトルとパーマリンクを設定するのみでOKです。
私の場合は記事タイトル：「記事一覧」パーマリンク：「blog」としました。
設定が終了したら、本文には何も記入せずそのまま公開ボタンをクリックして準備はおしまいです。
あとはホームページ設定の「投稿ページ」から作成した「記事一覧」を設定することによって記事一覧ページの作成完了となります！
記事一覧ページのイメージ
記事一覧のページはこのように表示されます。
カスタマイズ終了
以上「「STORK」トップページのカスタマイズ方法全部教えます！」でした！STORKには便利なショートコードがたくさんあり、webプログラムの知識が無くても綺麗なブログ作りが可能になってます(^^♪
私なりに考えてカスタマイズしましたが、webプログラムの知識はほぼ0なので本職の方と比べると見劣りするかもしれませんが是非参考までにご活用ください(^^)/
STORKは値段が10800円と決して安くはないと思いますが、このテーマはとっても使いやすいテーマだと思います(^^)/
ファイルやコードの利用について
サンプルコードなどは当サイトの免責事項をよくお読みになってからお使いください。Twitterフォロー
ブログの更新通知を受け取るにはこちらにはこちら↓Twitterもやってます(^^♪Excelについてはあまり触れませんがブログの更新のお知らせはツイートしています(^^♪
Twitterフォロー
Follow @takabou63Sponsored Link
コメントを残す