カスタマイズが簡単にできる、ショートコードの挿入もビジュアルエディタで簡単！
そんなTHE THORでトップページのカスタマイズをしてみました。
通常、ブログと言えばトップページは新着記事一覧であることがほとんどですよね。
しかし、記事数が増えるにつれて
- おススメ記事が後ろの方に埋もれてしまう
- トップページにコレは固定表示したい！
- カテゴリごとの新着記事とか置いた方がユーザビリティ高いって聞く
- トップページをサイトマップ代わりにしたい
という欲求が生まれます。しかし、いざやろうとしたらCSSの編集か独自のプラグインの実装をしないといけない…などハードルが高くで諦めてしまいます。
私もそうでしたからね。プラグインとかCSS編集でやろうとして、どうしてもうまくいかずに諦めていました。
でも、THE THORなら初期実装のショートコードだけできれいなトップページが作成出来るんです！！
このブログのトップページみたいにカスタマイズしたい！という方向けに、記事を書いていきますね。
ぜひ自分なりにアレンジして、独自のトップページを作り上げてください。
＼＼ テーマの購入はこちら ／／
THE THORでトップページ用の固定ページを作る
まずはトップページに設定するための固定ページを作ります。
『固定ページ』→『新規追加』
トップページは内部を２カラム（２分割）にするので、全体としては１カラム（サイドバーなし）にします。
サイドバー無しにしとかないと、PC表示で
| ヘッダー |
| カテゴリー１ | カテゴリー２ | サイドバー |
↑のような感じで詰まった表示になっちゃうのでサイドバー無しのタイプがおススメです。
固定ページの右側メニューで『カラム設定』→『１カラムにする』を選択します。
では、次にカテゴリごとの新着記事部分の作り方に行きます。
THE THOR専用ショートコードで２カラム（２分割）にする
まず、ビジュアルエディタで『カラム』の『２カラム１：１（PC)』を選択して、挿入します。
２分割されたカラムの中に、表示したいカテゴリ名を『段落』『見出し２』で記載します。
そして次の段に新着記事のショートコードを入れるのですが…ここでちょっと注意が必要です。
THE THORトップページに表示したいカテゴリーを挿入する
トップページに挿入したいカテゴリー名を記載したら、次はショートコードの挿入です。
ココで、少し注意が必要なのでNGパターンから順に紹介していきますね。
①まずは素直にショートコードを挿入する
見出しの後に挿入するのはビジュアルエディタ：『ショートコード』の『カテゴリー別新着一覧』です。
見出しを挿入し、エンターキーで１段落つけて追加すると↓のようになります。
タイトルは縦表記になってるし、5記事表示もめちゃくちゃ狭くて変ですよね。
私も最初、この変な感じになったので『Shift＋Enter』で段落つけずに２段にしたらどうかな？と思ったんですが、それだとショートコードまで見出しタグ内に入ってしまうんですよ。
②普通に挿入したらスマホ表示で変になる？確認方法
どうしたものか…と思った私。今度はショートコードと見出しを別々に２カラムボックス内に納めてみました。
そうすると、PC上での見た目は完成系と同じにはなったのでスマホ表示を確認することに。
PCでスマホ表示を確認するには、GoogleChromeの『デベロッパーツール』が最適です！
と、今度は上記のようにスマホ表示が崩れてしまいました。う～ん、これも失敗です。
スマホとPC表示でおかしくならないように調整する
最終的に、①のやり方を少し工夫してみることにしました。
まず、２カラムのボックスを作ってその中に見出しを設置。
次にテキストエディタで
<div class=”column__item”>
<h2 class=”column__item”>【借金の履歴】</h2>
[ archivelist cat=3 num=3 ]
</div>
<div class=”column__item”>
</h2>の、h2タグの後にショートコードを挿入しました。
すると、狙い通りの表示になりました！！
これでOKです！！
『カテゴリ一覧へ』のボタンコードも同様に追記してください。
任意のカテゴリーの一覧を表示する方法
archivelist cat=3 num=3
このショートコードを分解すると
- [cat=**]がカテゴリーIDと対応
- [num=**]が何個表示するかに対応
という風になっています。数字は好きなように設定すればいいですが、カテゴリーIDがどこに記載してあるか分からない方もいますよね？
カテゴリーIDは、『投稿』『カテゴリー』のID列に記載してあります。
↑の図でいくと『comico』のIDは38で『イーブックジャパン』のIDは182となりますね。
表示したいカテゴリーを調べて、記載してください。
THE THOR機能で、新着記事一覧をカテゴリリストの下に追加
ブログなので、やはり全体の新着記事一覧も表示したいですよね。
その場合は普通に２カラムのカテゴリー別一覧の下に『新着記事』の見出しをつけて、カテゴリ一覧リストのショートコードを挿入するだけです。
その時に[cat=0]と記載すれば全体の記事からの新着記事一覧となります。
私のトップページと同様にしたい場合は、参考にしてください。
これで完成したので、固定ページを公開しましょう。
THE THORオリジナルトップページ完成！設定を変更する
トップページ用の固定ページが完成したら、後はカスタマイズでトップページを変更するだけです。
- 『外観』→『カスタマイズ』
- 『ホームページ設定』
- 『ホームページの表示』を『固定ページ』に
- 『ホームページ』のドロップダウンから先ほど作った固定ページを選択。
完成です！！！
慣れれば３０～１時間くらいで、ショートコードのみで作れます。
今まで使用してきた他のテーマに比べて非常に簡単に作れましたね。ぜひ、参考にしてください！
＼＼ テーマの購入はこちら ／／
the Thorの記事投稿でよく使う機能を紹介します！
トップページをきれいに整えたら、肝心のコンテンツもアップデートしないといけません。
そんなあなたのために私が初回記事作成のときに使ってるザ・トールの機能をまとめてみましたよ。
ザ・トールのマニュアルサイトはいまいち整備されていませんからね…。
ザ・トールで初めて記事を投稿する。 せっかく有料テーマを買ったんだからただのテキストだけでは味気ないですよね。 この記事ではザ・トールの機能をふんだんに使った記事の作成方法を紹介していきます。 ザ・トールの装飾コードを[…]
the thorの有料級ショートコードの使い方を紹介！
ザ・トールのショートコードは本当に有料級です！
他のテーマには無いショートコードや装飾機能がたくさん。
その分、使い方もちょっとコツが必要だったりしますが。
そんなThe Thorのショートコードについて、こちらの記事で詳しく紹介しています。ぜひ参考にしてください。
ザ・トールの有料級ショートコード機能を使ってサイトをカスタマイズ！
ザ・トールのショートコードは、他の有料テーマと比べてもそん色ないどころか、かなり多いです。 また、他のテーマでは有料プラグイン○万円とかってのもザ・トールには最初から搭載されていたりします。 ショートコード機能を使ってどんなサイ[…]
