【有用】記事を装飾できるWordPressプラグイン

Tweet

Pocket

記事を装飾できるプラグインとは

WordPressでサイトやブログを運営する上で、コンテンツを見やすくするために記事の装飾は必要不可欠です。

例えば、「重要な文章を色やハイライトで強調する」「リンク付きのボタンを立体的に表現する」など、装飾の方法は数多くあります。

HTML・CSSの言語を使えば、自由に装飾することはできますが、専門的な知識が必要だったり大幅に時間を取られてしまいます。そこで、プラグインを導入すれば、素早く簡単に記事を装飾することができるのです。

記事を装飾するプラグインはたくさんありますが、ここでは信頼性や拡張性、使いやすさを考慮したものを優先的にご紹介します。

HTMLやCSSって何だっけ？という方はこちらをご覧ください。

【基本】HTMLって何？

HTMLは、Webサイトの構造を作るための言語です。Webサイトを構成する要素に役割を与える「目印」のようなものです。Webサイトを構成する要素を「開始タグ」と「終了タグ」で囲むようにしますが、一部「終了タグ」が要らない場合もあります。

wakaru-web.com

【基本】CSS（カスケーディングスタイルシート）って何？

CSS（シーエスエス）とは、「カスケーディングスタイルシート」と呼ばれるもので、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。

wakaru-web.com

ショートコードを使って簡単に導入できる「Shortcodes Ultimate」

「Shortcodes Ultimate」は、ショートコードと言われる短いコードを記事に挿入することで、立体的なボタンやタブ、スライダーなど、様々なコンテンツを導入することが可能です。

百聞は一見にしかずということで、実際に導入して説明していきたいと思います。

まず、WordPress管理画面から、「プラグイン」→「新規追加」で「Shortcodes Ultimate」を検索。該当のプラグインを「インストール」しそのまま「有効化」します。

これで導入は完了です。実際の記事で試してみましょう。

WordPress管理画面の「投稿」→「投稿一覧」もしくは「新規追加」で記事編集ページに入ります。すると、「ショートコードを挿入」ボタンが追加されているのでクリックします。

すると様々な機能が表示されます。

今回は、画像をスライドさせながら表示できる「カルーセル」を選択してみましょう。カルーセルスライダーは、何枚かの画像が最初から表示されており、一枚ずつ横にスライドしていく機能です。

設定項目が表示されます。今回は、必要最低限の項目だけ選択しました。

【設定した項目】

・ソースを「最近の投稿」に
表示する画像を、最新の投稿のアイキャッチ画像から引っ張ってきます。

・リンクを「投稿パーマリンク」に
投稿パーマリンクにすると、クリックした画像の投稿ページにアクセスします。

そして一番下にある「ライブプレビュー」をクリックすると、その場でカルーセルスライダーの状態を確認することが可能です。

完成したら、「ショートコードを挿入」をクリックしましょう。

記事編集ページには、ショートコードだけが表示されていますが、実際の記事にはしっかりとカルーセルスライダーが挿入されています。「プレビュー」で確認してみましょう。

同様の手順で、他にも立体的なボタンや、画面をスクロールすると本文や画像が表示されるようなアニメーションを設定できるなど、使える機能が数多く整っています。

記事作成をする上で必ず入れておきたい「TinyMCE Advanced」

WordPressの記事編集ページは、初期設定のままだといまひとつ機能が少なくて使いづらいです。

HTML・CSSの知識があるならば、自分でコードを打って編集することも可能ですが、初級者の方には敷居が高いでしょう。また、経験者であっても、コードを一から打つのも面倒な手間です。

それらの問題を解消するのが、「TinyMCE Advanced」です。痒いところに手がとどくと言われるぐらい、記事作成時の機能が豊富に揃っています。

導入方法は、WordPress管理画面から「プラグイン」→「新規追加」で「TinyMCE Advanced」を検索。該当のプラグインを「インストール」しそのまま「有効化」します。

検索画面で、TinyとMCEの間にスペースが空いていると表示されないので、スペースを空けないように注意してください。

そして、「設定」→「TinyMCE Advanced」にいき、記事編集ページに追加する機能を選び「変更を保存」しましょう。

実際に記事編集ページにいくと、先ほどの機能が追加されています。

SNSのシェアボタンを追加する「AddToAny Share Buttons」

最近では、SNSと連携するWebサイトも多くなってきました。Twitterなどでブログやサイトを宣伝すると、閲覧者をいつも以上に増やすことができるからですね。

FacebookやTwitterなどのアイコンを設置することは、記事全体の見た目の印象も綺麗になりおすすめです。

そこで、ブログなどにシェアボタンを追加することができる「AddToAny Share Buttons」をご紹介します。

まず、WordPress管理画面から「プラグイン」→「新規追加」で「AddToAny Share Buttons」を検索。該当のプラグインを「インストール」しそのまま有効化します。

その後、「設定」→「AddToAny」から設定を行いましょう。

保存すると、実際の記事にも反映されます。

今回変更しているのは、「ブックマークボタン」の場所のみです。

デフォルトでは、全ての項目にチェックが入っていますが、あまり多くの場所にシェアボタンがあっても、レイアウトがごちゃごちゃしてしまいます。

そのため、記事内の下部だけなど、ある程度場所を絞って表示することがおすすめです。

Tweet

Pocket