【初心者向け】THE THORのウィジェットとエディターの使い方!

  • 2020年8月7日
  • 2020年8月14日
  • THE THOR
  • 13view

こんにちは!ブログを書いて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. ナビゲーションメニュー

ブログ内のいろんな場所に設置できますが、このページではサイドバーに追加した場合という設定で設置してみます。

外観 ⇒ ウィジェット
やり方はすべて同じです。
項目をドラッグ&ドロップをするか、▼をクリックし展開したうえでどの部分に配置するか選びウィジェットを追加をクリックする。
 

1. カテゴリー人気記事

カテゴリー分けをした人気記事を表示させることができます。

タイトルを入力し、どのカテゴリーの人気記事を表示させるのか指定します。何記事表示するのか指定し「保存」をクリック。

出来上がり

2. タブコンテンツ

タブの付いたコンテンツ枠ができます。情報の多いものや小さい範囲でたくさんの情報をスマートに詰め込みたい時にとても便利です。

タブに入れるタイトルと中身の文章を入力し「保存」します。

出来上がり

3. 広告

アドセンス広告やアフィリエイト広告もここで自由に設定が可能です。プラグインなしでどこにでも配置できるので是非つかってみてください。

タイトルと広告のコードを入力し「保存」します。

出来上がり

4. 画像付き新着記事

画像がついた新着記事を表示させることができます。

タイトルと表示したい記事数を入力し保存をクリックします。

出来上がり

5. アーカイブ

何月に更新した記事なのか表示したい場合につかいます。

タイトルを入力し保存をクリックします。

出来上がり

6. カテゴリー

記事に設定されたカテゴリー別に整理するのに便利です。ユーザーも一目でこのブログにどんな内容の記事があるのかわかりますのでよく見える場所に設定しておくと良いと思います。

タイトルと必要事項を入力し「保存」をクリックします。

出来上がり

7. ギャラリー

見せたい画像や、少し単調な部分があれば視覚に訴えるためにギャラリーを配置するのも有効です。

ギャラリーの編集でメディアから画像を取り込むことができます。

出来上がり

 

8. ナビゲーションメニュー

グローバルメニューと同じく、作成したメニューを表示させるときに使います。メニューはいくつか作れますのであらかじめ設定をして置き必要な部分に設置していきましょう。

タイトルを入力し、どのメニューにするのか指定したうえで保存をクリックします。

出来上がり

 

THE THORのエディターの使い方

記事を投稿するために編集する場所であるエディターですが、THE THORをインストールするとツールバーにプリセットパーツなどが現れます。ただしもう少しよく使うパーツなど入れたい時には便利なプラグインTinyMCE Advancedがあります。

プラグインの新規登録で「TinyMCE Advanced」を導入し有効化します。

TinyMCE Advancedの設定

設定 ⇒ TinyMCE Advanced
例えば、ツールバーに下線のアイコンを設置したい時にはここでドラッグ&ドロップで移動させ「変更を保存」をクリックします。

ビジュアルエディターの使い方

ビジュアルエディターの使い方は難しくありません。テキストを普通に入力し必要な部分に色を足したり囲い枠を入れたりします。文章を入力していき「Shift」を1回押すと以下のようになります。

これはWordpress独特の改行なのですが、この改行を詰めて記載したい場合には「Shift」+「Enter」を一緒に押せば行が詰めて表示されます。

その他、マーカーを引いたりする場合には、反転させてからツールバーの操作をします。

反転させるとはライン等を引きたい文字を選んでおくということです。

さらに、囲い枠を入れたい場合には、おなじようにテキストを反転させてエディターのツールバーより操作します。

ビジュアルエディターの使い方は特に難しくはありません。数があるので難しく感じますが、慣れていけばいろんなテキストや色、パーツなどを記事に表示できるようになりますのでまずはいろんなものを触ってみてください。

構造の中身を触るわけではないので特にフリーズ等はしづらいと思いますのでまずは慣れることから始めましょう!

今使っているテーマで満足していますか?

カスタマイズに苦労している・・・

イメージ通りのデザインにならない・・・

思ったほど稼げてない・・・

こんな悩みを抱えておられる方も多いと思います。

ブログで稼ごうと思えば、記事の質と見た目の良さなども大事な要素です。ユーザーの目を引くデザインの工夫や次の記事へのスムーズな誘導などうまく目立たせてくれるテーマでは滞在率も高くなり、Googleの評価も上がってきます。

「初期投資」は稼ぐブログをつくるための第一歩。

WordPressの有料テーマの5つの利点

  1. 検索上位を目指せる
  2. 見た目の高級感と居心地の良さ
  3. 多くの機能
  4. マニュアル&会員フォーラムなどのサポートが受けれる
  5. 多くのブロガーが使っている

有料Wordpressテーマ「THE THOR」はあなたを稼げるブロガーに導きます!

 

THE THOR はコチラから

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

ブログを作る上でカッコいいデザインとSEO対策は必須です。THE THORは誰でも好感がもてるデザインと、最新のSEO対策で大人気のテーマです。

CTR IMG