WEBマスターの手帳 > WEBサイト作成 > WordPress > WordPressでHTMLやPHPが苦手な人に役立つショートコードが使えるプラグイン「Shortcodes Ultimate」

WordPress

2015年8月25日

WordPressでHTMLやPHPが苦手な人に役立つショートコードが使えるプラグイン「Shortcodes Ultimate」

Twitter 1 Facebook Google+ はてブ 2 Pocket 1 チャットワーク Eight Feedly

WordPressでWEBサイトを作っているんだけど、HTMLとかPHPとかわからない!ソースコードってなに?という方で、固定ページにボタンを設置したり、YouTubeの動画を貼り付けるといったことも「難しい!」「わからない!」となってしまっていませんか?

WordPressにはショートコードというPHPやソースコードを書き込まなくても、特定の文字を書けば済むという便利な機能があります。

今回は、そんなショッートコードを簡単に使えるプラグインをご紹介します。

スポンサードリンク

ショートコードってなに?

ショートコードというのは、事前にある特定のソースコードやPHPに名前(文字列)を付けておき、その名前(文字列)を固定ページに書くと「その名前が付いているソースコードを読み込む」というものです。

ややこしいですよね?例えばWordPressで投稿や固定ページなどに、画像ギャラリーを挿入するとショートコードなどの文字列が書き込まれると思います。これがショートコードです。

ソースコードやphpを直接書き込まなくても、ショートコードを書けば、ソースコードやphpを書き込んだのと同じことになると思ってください。

簡単にショートコードが使える「Shortcodes Ultimate」

「Shortcodes Ultimate」は55個ものショートコードが用意されており、WEBサイトづくりで必要な項目はほぼ揃っています。

カラム分けもできる

下のように本文スペースを縦に3分割するなどの「カラム分け」も簡単にできます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

ボタンの設置も超簡単!

ボタンの設置も簡単です。設置できるボタンの種類も50種類近くあります。

Click me Click me Click me Click me Click me Click me Click me Click me Click me

YouTubeの動画もレスポンシブ対応で貼り付けられる

YouTubeの動画をYouTubeが作ってくれる「貼り付け用コード」を使って貼り付けると、レスポンシブ対応していないため、スマートフォンなどで見ると、動画の幅が飛び出してしまいます。

「Shortcodes Ultimate」でYouTubeの動画を貼り付けるショートコードを使うと、設定時にレスポンシブ対応にできるので、スマートフォンで動画を見ても端が切れることがありません。
YouTubeの動画もレスポンシブ対応で貼り付けられる

音声データの貼り付けも簡単!

音声データをWordPressにアップロードして、投稿や固定ページに貼り付けるのも簡単です。
WordPressに音声データを貼り付ける

固定ページにカテゴリーごとの記事一覧を表示できる

WordPressの投稿や固定ページの作成画面ではhtmlなどは書き込めますが、phpを書き込むことはできません。ですが固定ページに任意のカテゴリーの記事を一覧を自動で表示させるにはphpを使う必要があります。

以前は固定ページに直接phpを書き込める「Exec-PHP」というプラグインがありましたが、現在はセキュリティ的に問題があるので使えなくなりました。

プラグインを使わない方法としては、固定ページで読み込めるようにテンプレートとして、ページを作成し、それをFTPソフトなどでWordPressが入っているサーバーにアップロードし、固定ページでテンプレート指定をして読み込む方法もあります。

ですが、これはphpがわかる人でないと選択肢としてはハードルが高いでしょう。そこでショートコードの出番です!

「Shortcodes Ultimate」には投稿を表示させるショートコードがあるので、それを使えば簡単に特定のカテゴリー内にある記事を表示させることができます。

実際にWordPressカテゴリー内の記事を表示させてみる

実際にショートコードを使って、WEBマスターの手帳の「WordPress」カテゴリー内の記事を5つリスト表示させてみます。

  • 投稿が見つかりません。

Shortcodes Ultimateの使い方

「Shortcodes Ultimate」の使い方も簡単です。今回は「固定ページにカテゴリー内の記事を表示させる」やり方に沿って解説します。

まずは「Shortcodes Ultimate」プラグインをWordPressにインストールして有効化させましょう。

次に固定ページ(または投稿)の作成画面で「ショートコードを挿入」をクリックします。
「ショートコードを挿入」をクリック

ショートコード一覧が表示されるので、何を表示させたいのかに合わせて項目を選択します。今回は左下の「投稿」を選択します。
使用するショートコードの選択

表示する内容の設定画面が表示されるので、YouTubeであれば貼り付ける動画URLなどの設定をしていきます。

今回は、カテゴリー記事の一覧なので、まず表示レイアウトを選択します。
表示レイアウトを選択

次に表示する数や表示させるモノの選択をします。今回は投稿一覧を表示させるので、投稿タイプは「投稿」を選択します。

特定のカテゴリーの記事だけを表示するために、タクソノミーは「カテゴリー」を選択します。タブを選択すれば、特定のタブが付いている記事だけを表示することもできます。
投稿タイプは「投稿」を選択

「条件」で、カテゴリーを指定します。表示させるカテゴリーを指定する

表示する順番を設定します。
表示する順番を設定

プレビューをクリックして実際の表示を確認します。
プレビューで表示を確認
プレビューで表示を確認2

OKであれば「ショートコードを挿入」をクリックすると、固定ページにショートコードが挿入されます。
ショートコードが挿入される

WEBサイトづくりで必要な項目は揃ってる

「Shortcodes Ultimate」を使って挿入できる例を少し載せておきます。どれも載せている以外に幾つか種類が用意されています。

タブの表示

Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content

アコーディオンの表示

Spoiler title
Spoiler title
Spoiler title

動きのある表示

何と言っても50種類以上のショートコードが用意されているので、ぜひインストール色々と試してみてください!

WEBサイトでこんな表示をさせたかったんだけどHTMLとかPHPがわからなくて、できなかったことが解決するかもしれませんよ。

この記事をシェアして頂けると嬉しいです

LINEで送る
Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い(投票数:1 、平均:2.00)
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • @webmaster_note
  • Instagram

最新記事一覧

ピックアップ記事一覧

カテゴリー

Webマーケティングスキルを習得するならテックアカデミー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事