Itaruテーマの使い方

Itaruテーマを使うには、
こちらの「Classic Editor」というプラグインをインストールし、有効化てください。
「プラグイン」⇒「新規追加」と進み、プラグインの検索窓に「Classic Editor」と入力してください。

これは、Wordpressテーマで旧式のビジュアルエディタとテキストエディタを利用できるプラグインです。

WordPressでは、ブロックを組み合わせるようにページを作成できる「ブロックエディタ」が新たに登場しましたが、記事を作る場合にはイマイチ使いづらいので旧エディターをお勧めしていて、

Itaruテーマも旧エディターで操作することを前提とした機能になっています。

といっても、ブロックエディタが使えないというわけではなく、
特におしゃれな商品ページを作りたい場合、ブロックエディタを使うと簡単に作ることができます。

ブロックエディタを使ったページの作成方法はSnow monkeyの公式サイトで紹介されているので参考にしてみてください。

ユーザーにエディターの切り替えを許可しますのチェックを「はい」にします。

これで、記事編集画面や記事一覧画面で、ブロックエディターとクラシックエディターに切り替えることができます。

カスタマイズ画面での設定

カスタマイズ画面で、投稿した記事を開いている状態で、

「デザイン」⇒「投稿ページ設定」で、

アイキャッチ画像を「コンテンツの上」にします。

これは、必ずやらなくてはならないわけではないですが、
デフォルトのサムネイル画像だとかなり大きいので、扱いづらい場合はこの設定をおすすめしています。

ウィジェットは、頭に「WPAW:」とついているウィジェットを主に利用してください。

記事の書き方

続いて、記事を書くために必要な「テキストエディタ」と「ビジュアルエディタ」の使い方を解説します。

テキストエディタ

Itaruテーマは、テキストエディタの上のボタンによって、簡単にタグを挿入して記事を作ることができます。

例えば、

の「重要」の部分を赤くしたい場合は、
その部分をドラッグして「赤文字」ボタンを押します。

すると、このように重要の前後に<○○>~</○○>で囲まれたタグが出現します。

「これはとても重要です。」

と、タグで囲まれた部分を赤くすることができました。

文字をドラッグした状態でボタンを押すと一度に前後のタグが挿入されますが、
ドラッグされていない状態でボタンを押すと、1回目は前のタグ、2回目は後ろのタグが挿入されます。

同じ要領で、見出しを挿入するときは「h2」、「h3」ボタン、マーカーを付けたい場合は「黄マーカー」ボタンを使います。

赤太字」は、赤文字と太字の組み合わせで、
赤+黄色+太字」は、赤文字と黄マーカーと太字の組み合わせになります。

<記事内にウィジェットを挿入>

「記事内1」「記事内2」「記事内3」のボタンを挿入すると、

その部分にウィジェットが挿入されます。

ウィジェット内に表示する内容はカスタマイズ画面から設定するのですが、
その際はウィジェットが挿入されたページを表示した状態でないと編集ができないので注意してください。

指定した部分をPC、もしくはスマホのみで表示したい場合は、「pc」、「スマホ」ボタンを使います。

このタグで囲まれた部分は、該当するデバイスからしか表示されなくなります。

例えば、このように記事内1などのウィジェット挿入タグをスマホタグで囲むと、

この場合は、記事内1のウィジェットはスマホからのみ表示されるようになります。
ただ、その際は記事内1のウィジェットを編集するにはPCからでは行えなくなる(記事内1のウィジェットが表示されない)ので、スマホから編集するか、編集した後に「スマホ」タグを挿入するようにしてください。

逆に、カスタマイズ画面から特定のウィジェット内に「スマホ」タグを挿入することもできます。

ビジュアルエディタ

ビジュアルエディタは、コードが並んだテキストエディタよりも、視覚的にわかりやすい形で記事を書くことができます。
特に、画像をたくさん使う記事の場合は、ビジュアルエディタで確認しながら作業をするとやりやすくておすすめです。

<ビジュアルエディタの特徴>

ビジュアルエディタ独自の挙動として、「ENTERを押すと改行ではなく次の段落へと進む」という点が挙げられます。

例えばブロック内に文章を入力する際に、Enterを押してしまうとブロックタグから次の段落へ進んでしまうため、
ブロックの外に出てしまいます。

ブロック内で文章を進めたい場合は「ENTER」+「Shift」で行う必要があるので注意してください。

これは文章で説明するよりも、実際にやってみたほうが分かりやすいと思います。

ビジュアルエディタでは、ウィジェットの挿入などテキストエディタの機能が一部使えないので、
適宜テキストエディタに切り替えながら作業を行ってください。

オートSNSのコンテンツページをカスタマイズする

Itaruテーマには、オートSNSのコンテンツページをカスタマイズする機能があります。

まず、Wordpressのダッシュボードから「Itaruテーマ」⇒「コンテンツページ」へと進んでください。

見出し装飾

見出しを装飾する場合は、「見出し装飾」の下のCSSをコピーます。

そしてコンテンツページの下の「その他」からCSSを選択します。

選択したら、先ほどコピーした内容を貼り付けます。

プレビュー画面で確認して適用されていればOKです。

マーカー

マーカーは、CSSだけでなくJavaScriptの設定も必要になるので、
「その他」⇒「CSS」と「その他」「JavaScript」の2つをそれぞれ貼り付けてください。

そして、マーカーを適用するには、タグを書き換える作業が必要になります。

今回は、「ここにマーカーを引く!」の部分に適用していきたいと思います。

まず、マーカーを引きたい部分をドラッグし、上の「B」ボタンを押して太字にします。

次に、左上の「ソース」を選択します。
先ほど太字にした箇所がstrongタグで囲まれているはずです。

このstrongタグを、bタグに変更します。

このようにstrongの部分を、そのままbに置き換えればOKです。

これで、タグで囲まれた箇所にマーカーが引かれます。
プレビュー画面で確認してみましょう。

このように、ちゃんと反映されています。

これらのカスタマイズは、コンテンツページを作るたびにコピペするのではなく、
CSSとJavaScriptを設置したコンテンツページを「装飾テンプレート」などの名前で保存し、
新規作成の代わりにそのテンプレートを「複製」することで、すぐにカスタマイズされたコンテンツページを利用することができるので、ぜひ活用してください。