19.ショートコード埋め込み－Jetpack by WordPress.com

2014/01/20 2014/11/22

wordpressを利用していて一番利用されているプラグインが、
このwordpress.comが提供しているJetPackではないでしょうか。
JetPackプラグインは機能が多いのですが、
ここでは「ショートコード埋め込み」の機能についてご紹介します。

はじめに

Jetpack by WordPress.comのすべての機能を使っているでしょうか。
私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。

ざっと全体の機能を確認しましたので、ご紹介しておきます。

尚、動画を単に埋め込んで表示するといった場合にはJetPackの導入さえ必要はありません。
代表的な動画サイトの動画コントロールの埋め込みに関して、以下でご紹介しています。
WordPressサイトへの動画埋め込みをプラグインレスで行う方法

ショートコード埋め込み

ショートコード埋め込み

ショートコードを使えば簡単かつ安全に外部メディアをサイトに埋め込めます。シンプルなコード一つで、WordPress に YouTube、Flickr などのメディアを埋め込むよう指定できます。

投稿または固定ページエディターにショートコードを直接入力し、メディアを埋め込みます。詳しい方法については以下のリンクをご覧ください。

利用出来るショートコード:
[ archives ] [ audio ] [ blip.tv ] [ dailymotion ] [ flickr ]
[ scribd ] [ slideshare ] [ soundcloud ] [ vimeo ] [ youtube ]
[ polldaddy ] [ wpvideo (VideoPress) ]

JetPackショートコード詳細

使用方法

利用できるショートコードに表示された各サービスが利用できますが、
各機能を順を追ってみていきます。

archives ショートコード

これ、実は前々から欲しかった機能でしたが、こんな簡単な方法があったのか・・・そんな感じです。

各種条件指定によってさまざまな表示方法を行うことができます。
詳細は以下でご紹介しています。

◆01.投稿の一覧表示には、Jetpackのアーカイブ(archives)ショートコード埋め込み(各種条件指定例)

このショートコードは投稿本文エリアに対して[ archives ]と入力すると、
直近の投稿が一覧ですべて表示されます。

すべての投稿一覧

埋め込み例

実際に埋め込みを行ったイメージは以下のようになります。
直近５投稿を表示しています。

audio ショートコード

私は音楽や楽器には疎いので、あまり音楽を共有するようなケースがないのですが、
誰かに共有したいと思うような音楽ファイルがある場合には、プレーヤーを表示することができます。

細かな設定などはありませんが、詳細は以下でご紹介しています。

◆02.音楽プレーヤー表示には、Jetpackのaudioショートコード埋め込み

オーディオソースの指定

WordPress.comで対応している音楽共有サービスで、SoundCloudというサービスがあります。
SoundCloud – Hear the world’s sounds

このサービスで偶然見かけた、中国の方(Ribbon829’sさん)の
作品を例にプレーヤーの埋め込みを行ってみます。
Ribbon829’s stream on SoundCloud – Hear the world’s sounds

埋め込みにはダウンロードしたファイルを自サイトにアップロードしURL指定する方法もとれますが、
外部サイトのファイルを直接指定することも可能です。

サンプルオーディオは以下をお借りしています。
外面的世界 by Ribbon829 on SoundCloud – Hear the world’s sounds

SoundCloudからダウンロードさせて頂いたファイルを以下にアップロードしています。
http://algorhythnn.jp/algorhythnn.jp/pblic_sound/outward_world.m4a

※音楽ファイルのすべての著作権はRibbon829さんに帰属いたします。

尚、SoundCloud専用のショートコードを利用するとよりリッチなプレイヤーを表示することができます。
SoundCloudは音楽を聴く側として利用する分には登録は不要です。

JetPackオーディオショートコード

このショートコードは投稿本文エリアに対して[ audio ]と入力しパラメータでURLを指定します。

[audio http://algorhythnn.jp/pblic_sound/outward_world.m4a]

1	[audio http://algorhythnn.jp/pblic_sound/outward_world.m4a]

埋め込み例

実際に埋め込みを行ったイメージは以下のようになります。
※尚、自分でファイル公開される場合にはパーミッションは755とします。

blip.tv ショートコード

blip.tvの埋め込みを行いたいかどうかは別として、
blip.tvではビデオのURLを投稿に貼り付けるだけでプレイヤーを埋め込むことができます。

細かな設定などはありませんが、詳細は以下でご紹介しています。

◆03.blip.tvプレーヤー表示には、Jetpackのblip.tvショートコード埋め込み

埋め込み例

blip.tvの埋め込みでは、blip.tvの[Embed]ボタンから取得した<iframe>タグを、
WordPressのテキストエディタに貼り付けると、ショートコードに変換されるようなのですが、
ヘルプ明記のフレームタグと仕様が現在は異なっているようで、変換されません。

その為、URLを直接貼り付ける形で埋め込みを利用されることをお勧めします。
実際には以下のように表示されます。

dailymotion ショートコード

DailymotionでもビデオのURLを投稿に貼り付けるだけでプレイヤーを埋め込むことができます。

またDailymotionショートコードに対して、
ビデオコンテンツのIDを設定することでも埋め込みを行うことができます。

ショートコードを利用することでビデオ情報の非表示化を指定したり、
ビデオコントロールのサイズを変更することができます。

細かな設定などはありませんが、詳細は以下でご紹介しています。

◆04.Dailymotionプレーヤー表示には、Jetpackのdailymotionショートコード埋め込み

埋め込み例

実際には以下のように表示されます。

flickr ショートコード

Flickr VideoでもビデオのURLを投稿に貼り付けるだけでプレイヤーを埋め込むことができます。
またflickrショートコードに対して、
ビデオコンテンツのIDを設定することで簡単に埋め込みを行うことができます。

細かな設定などはありませんが、詳細は以下でご紹介しています。

◆05.Flickr Videoプレーヤー表示には、JetpackのFlickrショートコード埋め込み

埋め込み例

実際には以下のように表示されます。

scribd ショートコード

scribdはオンラインでドキュメントを公開し、情報発信や出版を行うことを目的としたサービスで、
まだ日本語のドキュメントや本は少ない印象ではありますが、
自らが発信するコンテンツがあるような場合には、
scribdで公開しブログに埋め込んで紹介するといったことが行えます。

また、いいドキュメントを見つけた際に共有するのもいいと思います。
しかし、昨今のCDの流れのように「メディアはいらないデータがあれば」って風に
書籍も移行していくのでしょうかね。

scribdを埋め込む為のショートコードはscribdのサイトから取得します。
取得する方法など、詳細は以下でご紹介しています。

◆06.scribdドキュメント表示には、Jetpackのscribdショートコード埋め込み

発行されたショートコードは以下のようになっています。

[scribd id=153485037 key=key-6r5vcnrzq7a7nhtqnzl mode=scroll]

1	[scribd id=153485037 key=key-6r5vcnrzq7a7nhtqnzl mode=scroll]

埋め込み例

実際に埋め込んだドキュメントを表示すると以下のように表示されます。

View this document on Scribd

（引用）著作：Judy Dillon　出版：Emereo Publishing

サイズなどもscribdサイト上で選択することができますので、
適宜サイトにあったサイズなどで埋め込むとよいでしょう。

slideshare ショートコード

SlideShareはオンラインでプレゼンテーション（スライド）を公開し、
情報発信を行うことを目的としたサービスです。
日本語のドキュメントも最近はよく見かけるようになってきました。

また、いいプレゼンテーション（スライド）を見つけた際に共有するのもいいと思います。
今後はこうしたWeb上で公開したドキュメントを多く利用するようになってくるのかもしれませんね。

SlideShareを埋め込む為のショートコードはSlideShareのサイトから取得します。
取得する方法など、詳細は以下でご紹介しています。

◆07.SlideShareプレゼンテーション表示には、Jetpackのslideshareショートコード埋め込み

埋め込み例

実際に埋め込んだプレゼンテーション（スライド）を表示すると以下のように表示されます。

（引用）企業サイト運営向けWordPressプラグインの紹介

著作：よつばデザイン　代表　kenji goto　様

スライドは簡潔に訴求することができ、直観的に情報伝達ができて便利ですね。
ブラウザの更新などを行わずにページ遷移できることもメリットですね。

soundcloud ショートコード

SoundCloudでは各種SNSへ共有を行う機能があり、
サイトから共有を行うことができるようになっています。

ここでは「audio ショートコード」でも利用させて頂いた、
中国の方(Ribbon829’sさん)の作品を例にプレーヤーの埋め込みを行ってみます。

実際、SoundCloudは日本人が少ないのであまり日本向きではない印象です。

SoundCloudを埋め込む為のショートコードはSoundCloudのサイトから取得します。
取得する方法など、詳細は以下でご紹介しています。

◆08.SoundCloudジャケット表示には、Jetpackのsoundcloudショートコード埋め込み

2013/01/19余談
今、J-waveのROCKETMAN SHOWを聴きながら記事を書いているのですが、
ROCKETMAN（ふかわさん）がSoundCloudについて語っていました。
あれ？意外と知られているサービスなのかもしれない・・・。

埋め込み例

表示されるプレイヤーは以下のようになります。
自分も音楽ができたらな・・・こういうジャケットで公開するのって格好いいですよね。

これはSoundCloud Audio Playerというプレーヤーが表示されています。

vimeo ショートコード

VimeoでもビデオのURLを投稿に貼り付けるだけでプレイヤーを埋め込むことができます。
またVimeoショートコードに対して、
ビデオコンテンツのIDを設定することで簡単に埋め込みを行うことができます。

細かな設定などはありませんが、詳細は以下でご紹介しています。

◆09.Vimeoプレーヤー表示には、Jetpackのvimeoショートコード埋め込み

埋め込み例

実際には以下のように表示されます。

youtube ショートコード

YoutubeでもビデオのURLを投稿に貼り付けるだけでプレイヤーを埋め込むことができます。
またYoutubeショートコードにオプションを指定することで、
関連動画の表示や再生開始・終了位置指定などが行えるようになります。

詳細は以下でご紹介しています。

◆10.Youtubeプレーヤー表示には、Jetpackのyoutubeショートコード埋め込み

実際には以下のように表示されます。

polldaddy ショートコード

PollDaddyのショートコード利用は、WordPress.comブログサービスではすぐに利用できますが、
独自に設置したブログでは、このJetpackを利用するか、
Polldaddy WordPress pluginを利用することが必要です。

WordPress shortcodes
If your have a WordPress blog then there is a very easy way of getting your Polldaddy content into your posts and pages using WordPress shortcodes.
For blogs hosted on WordPress.com, our shortcodes are all ready built in so they should work straight away. Yah!
For self hosted blogs you will have to install either the Polldaddy WordPress plugin or the excellent Jetpack plugin which has Polldaddy shortcode support built right in.
When you create a poll, survey, quiz or rating widget in your Polldaddy.com account, click on ‘embed & link’ and keep an eye our for the WordPress shortcode option.
For reference, our shortcode looks like:
（引用）WordPress shortcodes | Polldaddy Support

以前の「wordpressに投票機能を追加するPOLLDADDY v2.0.21-プラグインを利用」で利用した、
ショートコードの形式は、
JetPackのみでも利用することができます。

※当サイトではJetPackは有効ですが、POLLDADDYプラグインは有効ではありませんが、
以下の通り、投票を表示することができます。

[polldaddy poll=7661560]

1	[polldaddy poll=7661560]

埋め込み例

実際には以下のように表示されます。
尚、デザインは様々なものから選ぶことができます。
POLLDADDY(v2.0.21)プラグインで利用可能な投票(Poll)のスタイル一覧

過去の投稿のご参考

PollDaddyの利用にあたっては、まず利用登録が必要です。
wordpressに投票機能を追加するPOLLDADDYの利用登録

PollDaddyのプラグインを利用した実装による、
アンケート、投票に関してのショートコードに関しては以下で以前ご紹介をしています。
wordpressに投票機能を追加するPOLLDADDY v2.0.21-プラグインを利用

PollDaddyショートコードはメール投稿から投稿を行う際にも利用（記述）することができます。
Jetpack by WordPress.comのメール投稿時に利用可能なオプション

wpvideo (VideoPress™) ショートコード

VideoPress™の利用には、プレミアムプランへの申し込みが必要になります。
プレミアム機能 — WordPress.com

この本来の目的はWordPress.comブログの機能拡張です。
以下の機能が「99$/年」で利用できるようになります。

独自ドメイン登録と利用
ディスクスペース10G拡張
カスタムCSSの利用
広告の非表示
ブログユーザー35人制限の解除

月間にすると「8.25$/月あたり」ですから、まぁ高いわけではないのですが、
WordPress.comブログを利用していない場合は、VideoPressの利用にかかる費用ということになります。
それではちょっときついかなと思うところです。

ここでは、VideoPressのサンプル動画の埋め込みのみご紹介しておきます。
VideoPressの動画から[Share]をクリックして表示される[Copy Shortcode]をクリックすると、
ショートコードがクリップボードにコピーされます。

VideoPressショートコード取得

取得されるショートコードは以下のようなコードです。

[wpvideo OO4thna8]

1	[wpvideo OO4thna8]

埋め込み例

実際には以下のように表示されます。

JetPackのショートコード埋め込みで利用できる埋め込みコンテンツは以上でです。

さいごに

こうしてみると、JetPackを有効化しただけで、
かなりのショートコードが利用でき、使わないものもあるでしょうが便利だと思います。

尚、WordPress.comブログではさらに多くのショートコードが利用できるようになっています。
Shortcodes — Support — WordPress.com

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。