こんにちは！ブログを書いて1年で月収60万円突破したみのりんです。
WordPressでブログを作る際には、ユーザーにとって居心地の良いサイトにしたいですよね。デザインを凝ってみたり記事内容を工夫したりと考えます。
初心者の頃は、THE THORの着せ替えなどを導入すればそのままブログを作れますが、「ちょっとこのレイアウト変更したいな・・・」と思った時にウィジェットを上手に利用すれば思った通りに作れます。
そこで、ウィジェットの使い方と記事作成に必要なエディターと含め、超初心者でもわかるように説明してみます。
THE THORのウィジェットとは？
ウィジェットとエディターは、THE THORだけではなくWordpressには必ず設置されている機能です。私は初心者の頃、TCDのテーマを使っていて（TCDは基本的にデザイン固定型が多い）ほとんどウィジェットを触ることがありませんでした。
実際にそれで運営はできていたのですが、THE THORで初めてウィジェットを操作してみてその自由度の高さに驚きました。
ウィジェットまでのアクセス
ウィジェットを開くと以下のようになっています。左側の①に配置されている「項目」を右側の②の「指定場所」に置くことでブログ内のレイアウト調整ができます。
移動させる方法は2通り
- 項目を矢印で抑えたまま右側に実際持っていくドラッグ＆ドロップ
- 項目の▼をクリックし場所の指定をする
ウィジェット操作例
ウィジェットを操作するとどんな風になるのか、ここで例を見てみましょう。
やりたいこと
サイドバーに人気記事を表示させたい場合
ウィジェット画面を開きます。
左側の[THE]人気記事の項目をサイドバーエリアに配置すると以下のようにサイドバーに人気記事が表示されます。
ウィジェットで操作すると好きな場所に項目を表示させることができるので、例えばトップページにCTAを表示させたいとか、特別な文章と画像を配置したい時などにとても便利ですし自分なりの構成を作れます。
THE THORのエディターとは？
こちらもWordpressを導入すれば必ず使う部分なので簡単に説明します。
最近で新しいブロックエディター（Gutenberg・グーテンベルク）が出てきますので、もしそちらの場合にはここは飛ばしてもらってOKです。Gutenberg自体あまり評判がよくないので、旧エディターを使っている人が多く、私もプラグインで変換して使っていますので、旧エディターで説明していきます。
2種類のエディター
ビジュアルエディターとテキストエディターという2種類のエディターがあります。同じ画面でタブのみで変更できます。
ビジュアルエディター
主に基本の入力をするのはこちらを使います。
テキストエディター
こちらは、HTMLを使用するときに使うエディターです。例えば、Instagramのコードを入れて大きさを調整したりするときにコードをここで修正したり削除したりします。
以上の2つのエディターを使い分けながら記事を作っていきます。
THE THORのウィジェットで配置する便利機能
ウィジェットでは自分の配置したいものを自由に入れるカスタムHTMLのようなものもありますが、最初から便利に使える機能もあります。特に使いやすそうなものをお伝えしていきます。
- カテゴリー人気記事
- タブコンテンツ
- 広告
- 画像付き新着記事
- アーカイブ
- カテゴリー
- ギャラリー
- ナビゲーションメニュー
ブログ内のいろんな場所に設置できますが、このページではサイドバーに追加した場合という設定で設置してみます。
1. カテゴリー人気記事
カテゴリー分けをした人気記事を表示させることができます。
タイトルを入力し、どのカテゴリーの人気記事を表示させるのか指定します。何記事表示するのか指定し「保存」をクリック。
出来上がり
2. タブコンテンツ
タブの付いたコンテンツ枠ができます。情報の多いものや小さい範囲でたくさんの情報をスマートに詰め込みたい時にとても便利です。
タブに入れるタイトルと中身の文章を入力し「保存」します。
出来上がり
3. 広告
アドセンス広告やアフィリエイト広告もここで自由に設定が可能です。プラグインなしでどこにでも配置できるので是非つかってみてください。
タイトルと広告のコードを入力し「保存」します。
出来上がり
4. 画像付き新着記事
画像がついた新着記事を表示させることができます。
タイトルと表示したい記事数を入力し保存をクリックします。
出来上がり
5. アーカイブ
何月に更新した記事なのか表示したい場合につかいます。
タイトルを入力し保存をクリックします。
出来上がり
6. カテゴリー
記事に設定されたカテゴリー別に整理するのに便利です。ユーザーも一目でこのブログにどんな内容の記事があるのかわかりますのでよく見える場所に設定しておくと良いと思います。
タイトルと必要事項を入力し「保存」をクリックします。
出来上がり
7. ギャラリー
見せたい画像や、少し単調な部分があれば視覚に訴えるためにギャラリーを配置するのも有効です。
ギャラリーの編集でメディアから画像を取り込むことができます。
出来上がり
8. ナビゲーションメニュー
グローバルメニューと同じく、作成したメニューを表示させるときに使います。メニューはいくつか作れますのであらかじめ設定をして置き必要な部分に設置していきましょう。
タイトルを入力し、どのメニューにするのか指定したうえで保存をクリックします。
出来上がり
THE THORのエディターの使い方
記事を投稿するために編集する場所であるエディターですが、THE THORをインストールするとツールバーにプリセットパーツなどが現れます。ただしもう少しよく使うパーツなど入れたい時には便利なプラグインTinyMCE Advancedがあります。
プラグインの新規登録で「TinyMCE Advanced」を導入し有効化します。
TinyMCE Advancedの設定
ビジュアルエディターの使い方
ビジュアルエディターの使い方は難しくありません。テキストを普通に入力し必要な部分に色を足したり囲い枠を入れたりします。文章を入力していき「Shift」を1回押すと以下のようになります。
これはWordpress独特の改行なのですが、この改行を詰めて記載したい場合には「Shift」+「Enter」を一緒に押せば行が詰めて表示されます。
その他、マーカーを引いたりする場合には、反転させてからツールバーの操作をします。
反転させるとはライン等を引きたい文字を選んでおくということです。
さらに、囲い枠を入れたい場合には、おなじようにテキストを反転させてエディターのツールバーより操作します。
ビジュアルエディターの使い方は特に難しくはありません。数があるので難しく感じますが、慣れていけばいろんなテキストや色、パーツなどを記事に表示できるようになりますのでまずはいろんなものを触ってみてください。
構造の中身を触るわけではないので特にフリーズ等はしづらいと思いますのでまずは慣れることから始めましょう！
