普通のWordPressユーザーなら、PHPなんてまず意識しません。そういうのを全く意識せずに使えるのがWPの売りなので

でも中級者～上級者になると、PHPを埋め込みしたい場面 もあるはずです。

そんな時に便利だったのが PHP Everywhere というプラグイン

文字通り、個別の投稿ページのどこにでもPHPが埋め込める という優れものです。このプラグインの使い方とか注意点について紹介・・・

PHP Everywhereのインスト―ル

まずはインストールしないと使えないので、そこから

メニューから「プラグイン」ー＞「新規追加」を開き、
検索欄から「php everywhere」と検索すれば見つかるはずです。

↓ このプラグイン

これをインストールして有効化すれば、PHP埋め込みができるようになります。

あるいは次のプラグインページから直ダウンロードも可能

ページURL : https://ja.wordpress.org/plugins/php-everywhere/

とりあえずインストール＆有効化しておきます。

個別ページにPHPを埋め込む基本手順

自分もそうなんですが、
始めてこのプラグインを使うと、埋め込み手順が少し分かりにくいです。

　↓ 箇条書きするとこういう手順

1. PHP 埋め込みする投稿編集ページを開く
2. PHP Everywhereのボックスを探す
3. その中にPHPスクリプトを記入
4. 投稿本文にショートコード挿入

大まかにいうと、こういう埋め込み方

たとえばPHPから "Hello PHP!" と投稿ページに表示したいなら、次みたいにできます。

１．まず投稿内から PHP Everywhere ボックスを見つける

↓ サイドバーにこういうのがあるはず

２．このボックスにPHPスクリプトを入力

↓ 必ず <? ～ ?> でスクリプトを囲むこと

３．投稿内に [php_everywhere] のショートコード挿入

あとは投稿を保存して、ページを開いてみてください。

下画像みたいに、PHPから出力したメッセージが表示されてれば成功 です。

↑ "Hello PHP!!" がスクリプト出力した部分

これで個別の投稿ページでもPHPが使えるようになりました。

• 動的にページ内容を変えたり
• DBからデータを取ってきたり、
• ファイルから読み込みたんだり、

そういうjavascript（jQuery）でできないことをしたいとき、PHP Everywhere は重宝するかもしれません（もちろん PHP も WP のことも把握してる上級者向け）

投稿本文内に複数のPHPを埋め込むには...

ココからは PHP Everywhere の応用編

各投稿ページに複数PHPを埋め込む方法についてです。

さっき紹介したショートコード [php_everywhre] だけだと、１つの投稿ページに１つのPHPしか埋め込めません。

でも次のように、複数のPHPスニペットを埋め込む手段もちゃんと用意されてます。

１．例えば異なるスクリプトを埋め込みたい場合、
まず本文内にそれぞれ instance パラメーターを設定

▼ １つめのスクリプト

[php_everywhere instance="hoge"]

▼ ２つめのスクリプト

[php_everywhere instance="fuga"]

２．あとはPHPボックスで $instance の値で処理を切り替えるだけ

↓ たとえばこういうコード

<?php

switch( $instance ) {
  case 'hoge': {
    /// 処理...
    break;
  }
  case 'fuga': {
    /// また別の処理...
    break;
  }
}

?>

ショートコードに instance パラメーターをつけると $instance がセットされるので、その値に応じて切り替えるという方法で複数スクリプトを埋め込めます。

記事先頭と記事末尾で、違った処理をしたいときとかに便利そう

PHP everywhre を使う時の注意点

ココからは蛇足かもしれないけど、大事なことなので補足です。

PHP Everywhere を使う時は 次の２つ に注意しないといけません。

１．絶対に exit とか die を呼び出さないこと

これはこのプラグインで絶対やってはいけないこと

絶対に exit; とか die; とか呼び出しちゃダメ！

書いてしまうと、 [php_everywhere] を挿入した以降が表示されなくなってしまいます。

↓ 例えば危険なコード例

<?php

/// GET引数を取得
$message = @$_GET['message'];
if ( ! isset($message) ) { die; }

/// 渡された内容を表示
echo $message . PHP_EOL;

?>

もし１つでも die; とか exit; が含まれるコードを書いてしまうと、そこでPHPが終了するのでフッターとか記事下の内容は一切表示されなくなってしまいます。

無意識に書いてしまいがちなので、PHP埋め込み時は気を付けましょう (-_-;)

２．グローバルな定数・関数をなるべく定義しないこと

次はグローバルな定数とか関数を定義しないこと

もっと正確にいうなら、
WordPressで定義されてる関数とか定数と被る名前を付けないってことです。

実際、WPではグローバルに使われる関数とか変数が多く用意されてます。

例えば間違って add_shortcode みたいな関数を PHP Everywhere ボックスの中で定義してしまったとしましょう。

↓ ヤバいコード例

<?php

function add_shortcode() {
  /// 何か処理
}

?>

WPに詳しい人は分かってるはずですが、 add_shortcde は既に定義済み

なので次みたいなエラーが出てしまいます。

Fatal error: Cannot redeclare add_shortcode() (previously declared in /home/example/example.com/public_html/wp-includes/shortcodes.php:63) in /home/example/example.com/public_html/wp-content/plugins/php-everywhere/shortcode.php(15) : eval()'d code on line 8

エラーが出たらページ出力も止まってしまうので、要注意！

もし全体でPHPスクリプトを管理したいなら...

ここまでで紹介した PHP Everywhere は投稿に埋め込むためのモノ

もしブログ・サイト全体に埋め込みたいなら、他のプラグインを使ってください。

↓ 用途別にオススメなプラグイン

• Post Snippets
  ⇒　コードとか文言を再利用できるプラグイン。PHPを含めたショートコードも作成できる
• Widget Logic
  ⇒　ウィジェットを「PCのみ」とか「スマホのみ」とか条件を指定してウィジェット表示を制御できる。その制御条件にPHPが使用される
• PHP Code Widget
  ⇒　ウィジェット内にPHPを埋め込んで表示できるプラグイン。PHPでブログをカスタマイズするときに重宝する

こういうのもあるので、興味があれば使ってみてください。

特に WidgetLogic と PHP Code Widget については、自分もお世話になってます。

まとめ - 個別のPHP埋め込みに超便利！

ということで、PHP Everywhere の紹介でした。

少し注意しないといけないポイントもあるけど、
色々カスタマイズしたり、個別ページにPHPを埋め込みたいときに便利そうです。

The post WordPress個別ページにPHP埋め込み！PHP Everywhereの使い方＆注意点 first appeared on Fukuro Press.

「ブログを始めたけど、アクセスが増えない！」
「アクセスはあるけど、もっと増やしたい！」

そういう人にオススメなのが 人気ブログランキング に参加すること

ランキングからのアクセスが見込めるので、参加するだけでもアクセスの底上げが期待できます。（特に新ブログ立ち上げ時に大助かり）

ということで、WordPressにブログランキングを設置する手順をまとめました。

またランキング設置した後の、具体的なアクセス数の増やし方についても解説します。

WPへの人気ブログランキング登録＆設置手順

１．まずは人気ブログランキングに登録しよう！

まずやるべきことはブログランキングへの登録＆参加

ただ登録するだけとはいえ、アクセス数を効果的に増やすにはコツがあるので、それも合わせて手順を詳解していきます。

まず 人気ブログランキング新規登録 にアクセス（別タブで開きます）

アクセスすると次みたいなページが表示されたはず

ここではフォームに従って必要な情報を入力してけばいいだけです。

ただし、アクセスアップのためには少しだけ入力内容にも工夫が必要ですね。

その工夫も交えながら登録手順を説明すると次のような流れ

まずメルアド、パスワード、名前、ブログURLを入力

「お名前」は別に本名じゃなくても構いません。（ハンドルネームでもOK）

あとブログURLは絶対必要なので、間違えないように正確に入力しましょう。

そうしたら次に「ブログのタイトル」と「ブログ紹介文」を入力

この時に注意すべきことは、

• ブログタイトルは30文字以内まで、
• ブログ紹介文は80文字以内まで、

という文字数制限があること

特に紹介文は 短いけれど魅力が伝わるような内容 にするのがベストです。ウソにならない範囲でクリックしたくなる紹介文とタイトルとつけましょう。

そうしたら次はブログの「カテゴリ」を選択

↓ブログカテゴリーの選択画面

上画像みたいに最大５つまでカテゴリーが付けれるようになってます。

カテゴリーには 割り振り率 があって、最大で100%になるように調整しないといけません。

た・だ・し
このカテゴリーは２つまでに絞り込むのがアクセスアップのコツ

なぜならカテゴリーを複数つけると分散してしまい、ランキング的にもポイント（後述）的にも不利になるからです。

ちなみに私個人の場合・・・
カテゴリーの割り振り率は次みたいな感じで設定してます。

WordPressが70%、ブログノウハウが30%という比率

もしかしたらWordPress全振り（100%）でもいいかもですが、ブログ術とかも紹介してるので、こういう割り振り率に設定してます。

とりあえずカテゴリーは最大２つ、できるなら１つに絞り込みましょう。

以上を入力したら、「入力内容の確認へ」ボタンをクリック

ここでは登録内容が確認できるので、
タイトルとか紹介文、割り振り率に問題がないか、よ～く確認しておいてください。

そして問題がなければ、「新規登録する」ボタンをクリック

これで登録は完了です！

２．ランキング用ブログパーツをコピーしよう

では次にブログ用のランキングパーツをコピーします。

これがないと、ランキングからの流入（アクセス）はほぼ見込めません。

設置手順について詳しく解説すると次の通り

まず登録したメルアドに次のようなメールが来てるはずです。

その中のログインURL（オレンジで囲った部分）をクリックして、ログインしてください。

いちいちメールを開くのは面倒なので、ブクマしておくといいかも

ログインしたら左にプロフィールが表示してある部分がありますよね？

その中の「リンクバナーを取得」と書かれたボタンを押します。

↓オレンジ色で囲ったボタンをクリック！

そうするとブログバナー・URLの取得画面が開いたはず

あとはここから自分のブログに設置したいリンク・バナーをコピーしてください。

選ぶのはバナーの方がベストです。画像があった方が目立つので

ただし、標準バナーは小っちゃくて目立ちにくいのが難点

もっと大きなバナーが欲しい場合、
次画像のようなリンクをクリックしてみてください。

↓「大きなサイズのバナーも...（略）」のリンクをクリック

これをクリックすると大きなバナー一覧が表示されます。

サイドバーとかに設置するなら、こういう大き目のバナーがおススメです。

ちなみにバナーのタグをコピーしたいなら、そのバナーをクリックし、表示されるダイアログからタグコピーができます。

３．WordPressにブログパーツを設置しよう！

次にやるべきことはWordPressへのブログパーツの設置

別に設置する場所は記事下とかサイドバーとか...どこでもいいと思います。

でも記事下とかの大事な部分に設置するほど重要なものでもないです。

なぜなら記事下は重要なウィジェット（例えば関連コンテンツ）を置く場所なので、そういうとこに設置すると他の邪魔になっちゃいます。

なので他の邪魔にならない サイドバー に設置してみましょう。

ではまず左のWPメニューから、
「外観」ー＞「ウィジェット」をオープン

ウィジェット画面が開いたら、
その中の「テキスト」ウィジェットをサイドバーにドラッグ＆ドロップ

サイドバーにウィジェットを設置したら、
下画像みたいに「テキスト」タブを開き、コピーしたブログパーツを貼り付ければOKです。

あとは「保存」ボタンを押せば、サイドバーにブログパーツが表示されます。

例えば次がこのブログに設置してるブログランキングの例

↓実際に設置したブログランキング

ただランキングを貼るだけじゃなく、
上に一言添えておくとクリックされる確率は高まるかも

ちなみにこのウィジェットでは、次のHTMLを使ってます。

<div style="text-align: center; margin-bottom: 32px;">

<p style="margin-bottom: 0;">
クリックしていただけると
ブログ更新の励みになります
</p>

<p style="margin: 0 auto;">
【ここはブログパーツに置き換え】
</p>

</div>

もしこれをカスタマイズする場合、【ここをブログパーツに置き換え】を自分のブログパーツタグに置き換えてください。

それだけで上画像みたいなブログランキングが設置できます。

ブログランキングの週間INと週間OUTとは？

ブログランキングを上手く活用すればアクセスアップに結構役立ちます。

でもその活用法を紹介する前に・・・
"週間IN" と "週間OUT" という重要な用語があるので、少し解説します。

「もう知ってるよ」という人はここは読み飛ばしてください。

週間INについて

ブログランキングのマイページを見てみると、
次みたいに 週間IN という項目が見つかるはず

これはどういう意味かを一言で表すなら・・・

「自分のブログからブログランキングにアクセスしてきた人数」

を表すポイントのこと

ただし10ポイント１人換算なので、
100ポイントなら10人がランキングにアクセスしてくれた、という意味になる訳です。

このポイントは自分自身で増やすことも可能です。（やり方は後で紹介）

週間OUTについて

週間INと真逆なのが、次の 週間OUT という項目

この週間OUTを一言で言い表すなら、

「ランキングから登録ブログにアクセスした人数」

を表すポイントのこと

これも10ポイント１人換算なので、
100ポイントなら10人がランキングからブログに訪問してくれたと分かります。

月間INについて

これについては説明するまでもないかも

文字通り、週間INポイントの月間バージョンというだけです。

アクセスアップするための２つの方法

さて今紹介した 週間IN と 週間OUT という２つのポイント

このポイントがブログランキング内での順位を決めてます。

そしてこの２つの内、
週間INは自分でポイントをためることも可能です。

その具体的なやり方を２つ紹介すると次の通り

方法１．１日１回ルーレットを回そう

ブログランキングには週間INがもらえるルーレットがあります。

それを１日１回回すのが１つめのアクセスアップのコツ

やり方はまず登録ブログの マイページ にアクセス

そして画面左から次みたいなルーレットを探してください。

↓週間INがゲットできるルーレット

画像をクリックすると、ルーレットが始まります。

そしてもう１度、ルーレットをクリックすれば週間INゲットです。

↓今日の成果は10PTだった...

調子のいい日だと30PTくらい当たることもあるので、それはお楽しみ

外れとかは一切ないので、
１日の終わりのご褒美的な感じで回すと楽しいかもしれないです。

方法２．自分でランキングバナーをクリック

実はさっき設置したブログランキング、
あれは自分でクリックしてもポイントが入るんです。

なので少しでもランキング順位を上げたいなら、
１日１回はランキングをクリックするのがアクセスアップのコツ

コツコツ自己クリックしていけば、バカにならないポイントが貯まります。

ただし、アドセンスとかは自己クリック禁止です！
他サービスでは絶対やってはいけません。

参考記事 : アドセンス停止を防ぐために”絶対”すべき５つの対策

でもブログランキングなら許可されてるので問題ないですね。

アクセス数を上げたいなら、１日１回クリックするのが得策です。

ブログランキングはアクセス底上げに効果抜群

自分もいくつかのブログでランキングに参加してます。

効果は 劇的にアクセスは増やせないけど、底上げ効果はあるかな 、といった感じ

あとアクセスが少ないブログ初期の支えにもなるので、お世話になってます。

もし「アクセスを少しでも増やしたい、底上げしたい」という方はブログランキングを設置してみてください、おススメです。

The post WordPressへのブログランキング埋め込み手順＆アクセスの増やし方 first appeared on Fukuro Press.

WordPressでGoogleマップの地図を埋め込む場合、直接Googleマップから埋め込みコードを取得して貼り付けることもできます。

しかし好きな位置にマーカーを置けず、いちいちGoogleマップからコードを取得しなくてはならないのでプラグインを使ったほうが色々カスタマイズもできて便利です。

ただ探してみると結構地図埋め込み系のプラグインはかなり多くありますが、数が多い分機能が足りなかったり使いにくいものも多いです。

そこここでは数ある地図系プラグインの中で一番使いやすいだろうと思われる「Google Maps Easy」というプラグインでWordPressサイトにGoogleマップを埋め込む方法を紹介します。

Google Maps Easyのインストール

まずメニューから「プラグイン」ー＞「新規追加」をクリック

プラグイン名で検索すると次のようなプラグインが出てくるので「今すぐインストール」を押してインストールしてください。

ちなみに手動インストールする場合は次ページかから直接ダウンロードも可能

https://ja.wordpress.org/plugins/google-maps-easy/

インストールしたら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押すのも忘れずに

地図の作成手順

記事やサイドバーなどに埋め込む記事を作成するにはメニューの「Google Maps Easy」から「Add Map」を選択してください。

開くと次のようなマップ作成画面が表示されます。

ここでマップやマーカーなどを設定していきます。

最低限でも設定はしておいたほうがいいのは次の項目

• マップタイトルとマップの大きさ
• マップで表示したい住所
• ズーム倍率
• 目的地のマーカー
• マーカーを押したときのメッセージ

では順にこの項目を設定していきます。

マップタイトルとサイズ

マップのタイトルは「Map Name:」、マップの幅は「Map Width:」、マップの高さは「Map Height:」でそれぞれ設定可能。

次の画像は設定例です。

初期設定は幅はコンテンツの幅に対して100%、高さは250pxに設定されています。

ただ高さが250pxは少し小さすぎるので350pxくらいにするとちょうどいい見た目になります。幅や高さについては自分の気に入るサイズにしてください。

設定したら「Save Map」ボタンを押すと設定が保存されます。

表示する住所

ここで設定する住所は地図の中心にくる住所のこと

それを設定するには次の「Map Center:」という項目を探してください。

ここに例えば東京タワーの住所である「東京都港区芝公園４丁目２−８」を設定する場合その住所を貼り付けすると次のように正しい書式の住所がサジェストされます。

サジェストされたのをクリックすると次のように「国名 郵便番号 住所」の形式を持つ正しい形式の住所が自動補完されます。

またプレビュー表示されている地図を見ると設定した住所(ここでは東京タワー)を中心にした地図表示になっていることが分かります。

住所の設定が終わったら「Save Map」ボタンを押して設定を保存しましょう。

ズーム倍率

地図のズーム倍率はプレビュー表示されている地図の「+」ボタンと「-」ボタンで拡大・縮小が可能

そしてズーム倍率を変更すると「Map Zoom:」という項目の「Zoom Level」がそれに合わせて変更されます。

このときモバイル端末でのズーム倍率を表す「Mobile Zoom Level」は更新されていないので「Zoom Level」の値に合わせておくとモバイル端末でもプレビュー通りに表示されます。

設定が終わったら「Save Map」ボタンを押して設定を保存しましょう。

マーカーの追加

マーカーとは地図を見る人に住所を分かりやすく知らせるための目印のようなもの

マーカーを設定するにはまず「Markers」タブを開いてください。下の画像のオレンジ色の枠で囲ったタブです。

そこでマーカーのタイトル・説明やアイコンを設定していきます。

まずマーカーをクリックしたとき表示されるマーカー名を「Marker Name:」から入力

例えば次のように一目でどのような場所か分かる名前をつけるのがベストです。

次にマーカーをクリックしたときに表示される場所の説明を「Marker Description:」に入力

下の画像のようにタグも使用可能です。

最後にマーカーのアイコンを設定します。

アイコン設定は次の「Icon:」という項目から設定可能

この項目でアイコンを変更するには「Choose Icon」をクリックしてください。次のようにマーカーに使用可能なアイコン一覧が出てくるので好きなのを選んで設定します。

このようなマーカーの設定をしたら「Save Marker」ボタンを押してマーカーを保存してください。設置したマーカーはプレビューマップで次のように表示されます。

以上でマップ設定は完了です。

マップの埋め込み方

作成したマップは次の２つの方法でサイト内に埋め込むことができます。

• ショートコードとして記事内に埋め込み
• ウィジェットとしてサイドバーなどに表示

次にこの２つのマップの埋め込み方について解説します。

記事内に埋め込む場合

投稿ページや固定ページなどに個別に埋め込む場合は「Google Map Easy」が作成したマップのショートコードを記事内に貼り付けます。

そのやり方は次の通り

まずメニューから「Google Map Easy」ー＞「All Maps」をクリック

マップ一覧が開いたら下の画像で示したペンマークのボタンを押します。

マップの編集画面が出てくるので「Map shortcode:」という項目を探してください。

そしてそこに表示されているマップのショートコードをコピー(下の画像でオレンジで囲った部分)して投稿ページに貼り付け

これで投稿記事に次のようにマップが表示されます。

またマーカーをクリックするとマーカー名と場所の説明も表示されます。

ウィジェットとして埋め込む場合

サイドバーなどの固定領域に地図を埋め込むにはウィジェットを使います。

その手順は次の通り

まずメニューから「外観」ー＞「ウィジェット」をクリック

ウィジェット画面が開くと「利用できるウィジェット」の中に「Google Map Easy」というウィジェットが表示されています。

それをサイドバーなどの固定領域にドラッグ＆ドロップして設置

ウィジェットを設置したら「Select Map:」を開いて表示したいマップ名を選んでください。

幅や高さ、ズーム倍率についても好きなように設定できます。

設定を保存すると固定領域に地図が表示されたはず

以下の画像は実際にサイドバーに埋め込んだマップです。

まとめ

WordPressにはGoogleマップを表示する地図系のプラグインが多くあります。

ただ機能が足りなかったり使いにくかったりするプラグインが多いので「Google Map Easy」が一番シンプルで使いやすいと思います。

自分の場所やお店を紹介したいなどの場合に活用してください。

The post WordPressで地図を埋め込むなら「GoogleMapsEasy」が一番おすすめ first appeared on Fukuro Press.

テキストメインのブログやサイトでも文章で表現しにくいことというのは必ずあると思います。特に複雑な物事を説明するときは文章だけだと厳しいですよね。

そういう時に読者に分かりやすく物事を伝えるのに便利なのが記事内に動画を貼り付けたり埋め込んだりすることです。

そして一言で動画を埋め込むと言ってもWordPressでは用途に応じて様々な埋め込み方があり、適切に使い分けなくてはなりません。

そこでここではWordPressで動画を埋め込む方法とどのような場面でそれぞれを使い分けるべきなのか、ということについて解説していきます。

動画を埋め込む３つの手段

WordPressで動画を埋め込む手段は大きく分けて次の３つ

• Youtube動画の埋め込み
• GIF動画を動画から作成して埋め込み
• 動画ファイルそのものを埋め込み

この３つの方法とそのメリット・デメリット、どのようなケースで使うべきかについて順に解説していきます。

1.Youtube動画の埋め込み

まず１つめはYoutube上にある動画をWordPressに埋め込む方法です。

埋め込み方はとても簡単でYoutube側で動画の埋め込みコードを取得してきて記事内にそのURLを貼り付けるだけです。

その詳しいやり方については次の記事で紹介したので、そちらをどうぞ

Youtube動画をWordPressにカスタマイズして貼り付ける方法

Youtube動画は埋め込みコードを取得して、それ貼り付ければWordPressに埋め込めます。ただし通常オプションだと動画サイズとかループ再生設定ができないのが不便です。そこで埋め込み動画のカスタマイズ方法をまとめました。

fukuro-press.com

2019-02-02 14:57

また次記事で紹介したように再生リストを埋め込むことも可能です。

Youtube再生リストをWordPressにプラグインなしで埋め込む方法

Youtubeの動画をWordPressに埋め込みたい場合、Youtube側で埋め込みコードを取得できますが再生リストのコードは取得できません。ですが埋め込みコードを少し書き換えるだけで簡単に再生リストも埋め込むことも可能です。ここでは再生リストを記事内に埋め込む方法と再生リストのカスタマイズ方法について解説します。

fukuro-press.com

2019-02-02 15:19

こういう方法を使ってYoutube動画を埋め込んでいるサイトはよく見かけると思います。

この方法を使うメリットやデメリットは次の通り

メリット・デメリット

まずYoutube動画を埋め込む場合のメリットは何かというと次のような点です。

• 埋め込みコードを貼り付けるだけで簡単
• 自分で動画を用意する必要がない
• 再生リストなども埋め込める

このようなメリットの一方で次のようなデメリットもあります。

• 外部のサービスに依存してしまう
• 動画が消されたり利用できなくなる
• 埋め込みコードの仕様が突然変わるなど...

Youtubeというプラットフォームに依存した動画の貼り付け方なので、もし動画がアップロード者に消されたりチャンネルごと削除されれば動画が見れなくなってしまいます。

また滅多にないことだと思いますが、埋め込みコードの仕様が変わることだってあるかもしれません。

このようにYoutube動画の埋め込みというのは外部サービスに完全に依存してしまうのがデメリットです。

この方法が向いているケース

このようなメリット・デメリットがあるのでYoutube動画を埋め込むのに適しているのは次のような場合です。

• 何かのモノ・サービスに関する公式動画を張りたいとき
• 他人の意見や主張を動画から引用したい場合

などなど...

Youtube動画は自分自身のコンテンツでないものを自分の動画内で参照したり引用したい場合に役立つと思います。

2.GIF動画の埋め込み

次は動画をGIF動画に変換して埋め込む方法です。

GIFというのは元々画像ファイルの形式の１つでしたが、パラパラ漫画のように１つのファイル内に複数画像を持たせることで動画のように再生することができます。

このGIF動画を作成して貼り付ける方法について次の記事で解説しました。

動画をGIFに変換してWordPressの記事内に貼り付ける方法

読者に文章で表現しにくい物事を説明するのに一番有効なのは動画を記事内に貼り付けることです。ただし動画ファイルをそのまま貼り付けると重くなる過ぎるので動画をGIFに変換して貼り付けるのがベストな方法です。ここではWebサービスを使って動画をGIFに変換してWordPressの記事内に貼り付ける方法について解説します。

fukuro-press.com

2019-04-20 09:59

この記事で紹介したように特別なソフトをインストールしなくてもWeb上で動画をGIFに変換してくれるサービスがあるので特別な用意は特に必要ありません。

メリット・デメリット

GIF動画を埋め込むメリットは次のような点です。

• 自分の動画を埋め込める
• 自分で削除しない限りは消えない
• サイズが軽い

GIF動画を自分で作成して埋め込むわけなのでYoutube動画と違い、突然消えるということはありません。

またこれは次に紹介する動画ファイルを埋め込む場合との比較ですが、GIFはサイズが圧倒的に小さくディスク使用量を圧迫しないという利点もあります。

ただその一方で次のようなデメリットもあります。

• 画質が動画ファイルと比べて劣化する
• フレームレートも低い

やはりGIF動画は元がGIF画像なので画質も悪く、Youtube動画や動画ファイルと比べてしまうとフレームレート(１秒当たりのフレーム数)も低下してしまいます。

この方法が向いているケース

このようなメリット・デメリットを考えるとGIF動画は次のような用途に向いています。

• 自分の動画を埋め込みたい場合
• 動画サイズを少しでも小さくしたい場合

外部サービスに依存せずに動画を埋め込めてサイズも大きくしたくない、という場合にGIF動画の埋め込みが役に立つでしょう。

3.動画ファイルの埋め込み

最後は動画ファイルそのものを埋め込む方法です。

動画ファイルと言っても色々な形式がありますよね。WordPressでは次の動画形式に対応しています。

• Windowsで使われている動画形式
  ⇒　asf、asx、wax、wmv、wmx、avi
• Appleで使われている動画形式
  ⇒　mov、qt
• MPEG形式
  ⇒　mpeg、mpg、mpe、mp4、m4v
• その他
  ⇒　flv、divx、ogv、mkv

このようにほとんどの動画形式はアップロードに対応しています。

詳しい埋め込み方についてはGIF動画の埋め込み方と一緒に次の記事でそのやり方を紹介しました。

WordPressで記事内にGIF動画や動画ファイルを埋め込む方法

ブログで文章では表現しずらい物事の手順や結果などを伝えたい場合、動画を使うというのが一番有効な方法です。WordPressで記事内に動画を埋め込む場合は「GIF動画を埋め込む」か「動画ファイルを直接埋め込む」かの２つの方法があります。ここではその２つの方法について解説し、それぞれのメリットやデメリットについて紹介します。

fukuro-press.com

2019-04-20 10:00

メリット・デメリット

この方法のように動画ファイルを直接埋め込むのは次のようなメリットがあります。

• 自分の動画を埋め込める
• 画質が高いから映像がきれい
• フレームレートも高くて滑らか

GIF動画と比べて画質やフレームレートを劣化させずに済むのが最大の利点です。

しかし一方で次のようなデメリットも存在します。

• サイズがでかくなりすぎる
• ディスク使用量が圧迫される

動画ファイルというのはどんなに圧縮してあったとしても元の情報量が多いのでサイズが大きくなってしまいます。

なのでデータサイズが大きくなりすぎてしまうというのが動画ファイルを直接埋め込む場合の最大のデメリット

この方法が向いているケース

動画ファイルを埋め込む方法が向いているのは次のようなケースです。

• 綺麗で滑らかな映像を見せたいとき
• 動画ファイルを貼り付けてまでも伝えたいことがあるとき

どうしても高画質・高フレームレートの動画を埋め込まなくてはならない場合だけこの方法を使うようにしましょう。

ただテキストベースのブログやサイトでそのような綺麗でぬるぬるな動画が必要な場面というのはそうそうないと思うのでGIF動画やYoutube動画の埋め込みで十分かもしれません。

まとめ

ここまでで紹介したWordPressに動画を埋め込む方法は次の３つ

• Youtube動画の埋め込み
• Gif動画を作成して埋め込み
• 動画ファイルそのものを埋め込み

そしてそれぞれの方法は次のケースに合わせて使い分けるのがベスト

• 他の人や公式の動画を引用したい場合
  ⇒　Youtube動画
• 自分の動画をそこそこの画質で埋め込みたい場合
  ⇒　GIF動画
• 自分の動画を最高の画質で埋め込みたい場合
  ⇒　動画ファイル

このように何を埋め込みたいかに応じてこの３つを使い分けるのが良いと思います。

以上ここではWordPressで動画を埋め込む方法とそれぞれをどう使い分けるべきなのか、ということについて解説しました。

The post WordPressに動画を埋め込むための３つの手段と使い分け方 first appeared on Fukuro Press.

ブログで物事の手順を分かりやすく伝えたい場合や文章では表現できないようなことを伝えたい場合に有効なのが動画を使って説明することです。

文章では全てを表現することは不可能ですが、動画なら全てとは言わなくても文章と比べてかなり多くのことを読者に伝えることが可能です。

そこでここでは動画をWordPressの記事内に埋め込む方法について解説します。

動画の埋め込み方

Youtubeなどの外部サイトから埋め込むのではなく直接動画を貼り付ける方法は次の２つです。

• 動画ファイルをアップロードして埋め込む方法
• 動画をGIFに変換したGIF動画を貼り付ける方法

この２つの方法について順に解説していきます。

動画ファイルの埋め込み方

最初はwavやmp3などの純粋な動画ファイルをWordPressに貼り付ける方法です。

まず投稿記事の編集画面から「メディアを追加」ボタンを押します。

「メディアを追加」ダイアログが出てくるのでそこから「ファイルをアップロード」タブを選択し(①)、そのあと「ファイルを選択」ボタンを押して(②)埋め込みたい動画をアップロードしてください。

アップロードが完了すると次のようにメディアライブラリに動画が追加されるので「投稿を挿入」ボタンを押すと記事内に動画が挿入されます。

次は実際にこの記事内に埋め込んだ動画です。動画をクリックすると再生します。

Youtubeのように動画プレイヤーが表示され、シークバーで動画をスキップしたり画面を最大化するなどの操作も可能です。

アップロード時の注意点

動画アップロード時に注意しなくてはならないのは動画の種類です。

WordPressでサポートされているアップロード可能な動画ファイル形式は次の通りです。

• Windowsで使われている動画形式
  ⇒　asf、asx、wax、wmv、wmx、avi
• Appleで使われている動画形式
  ⇒　mov、qt
• MPEG形式
  ⇒　mpeg、mpg、mpe、mp4、m4v
• フラッシュ動画形式
  ⇒　flv
• その他
  ⇒　divx、ogv、mkv

ほとんどの動画形式はアップロードできますが「3gp」形式の動画ファイルはアップロードできない点に注意してください。

また動画ファイル１つ当たりの最大サイズは30MBまでなのでそれを超える動画はアップロード不可です。

GIF動画の埋め込み方

次は動画などを変換して作ったGIF動画を埋め込む方法を解説します。

まず動画ファイルの埋め込みと同じように投稿記事の編集画面から「メディアを追加」ボタンを押します。

先ほどと同じく「メディアを追加」ダイアログが出てくるのでそこから「ファイルをアップロード」タブを選択し(①)、「ファイルを選択」ボタンを押して(②)埋め込みたい動画をアップロードしてください。

そしてメディアライブラリにアップロードしたGIF動画が追加されるので「投稿に挿入」ボタンを押すと記事内にGIF動画が挿入されます。

すると記事内にGIF動画が挿入されるのですがこの時点では動かないので次の手順で画像サイズをフルサイズに変更してください。

まず挿入されたGIF動画をクリックして表示されるメニューの中からペンマークを選びます。

すると「画像詳細」ダイアログが表示されるのでその中の「サイズ」という項目から次のように「フルサイズ」を選んで「更新」ボタンを押してください。

これでGIF動画が再生されるようになります。以下が実際にこの記事に埋め込んだGIF動画です。

このように特別な設定をしなくても自動でループします。

それぞれの方法のメリット・デメリット

ここでは動画を埋め込む２つの方法を解説しましたが、それぞれに次のようなメリットとデメリットがあります。

動画ファイルを埋め込む場合

この場合のメリットは次のような点です。

• プレイヤーが表示されるので停止やスキップなどができる
• 鮮明な映像を貼り付けることができる

動画ファイルを埋め込んだ場合、乱れのない綺麗な映像が表示出来る上にプレイヤーで一時停止なども可能です。

一方デメリットとして考えられるのは次の点です。

• ファイルサイズが大きいのでサーバー容量を圧迫する
• 読み込みに時間がかかる
• 長時間の動画はアップロードできない

一番の問題はファイルサイズです。動画ファイルはどうしてもファイルサイズがでかくなるので容量の少ないレンタルサーバーなどではアップロードしない方が良いかもしれません。

また30MBまでしかアップロードできないので長時間の動画は埋め込めません。もし長時間動画を埋め込みたいなら次記事で紹介したようにYoutubeから埋め込みコードをコピーして埋め込むという方法もあります。

Youtube動画をWordPressにカスタマイズして貼り付ける方法

Youtube動画は埋め込みコードを取得して、それ貼り付ければWordPressに埋め込めます。ただし通常オプションだと動画サイズとかループ再生設定ができないのが不便です。そこで埋め込み動画のカスタマイズ方法をまとめました。

fukuro-press.com

2019-02-02 14:57

メリットもありますがどちらかと言えばデメリットの方が大きいので、動画ファイルの直接埋め込みは鮮明に映像を伝える必要がある場合以外が使わない方が良いかもしれません。

GIF動画を埋め込む場合

この方法を使った場合のメリットは次のような点です。

• ファイルサイズが小さいので容量を圧迫しない
• 読み込み時間も速い
• ある程度なら長時間動画も埋め込める

GIF動画のメリットはファイルサイズの小ささです。サイズが小さいのでサーバー容量をあまり圧迫せず速く読み込無ことが可能になります。

一方のデメリットは次のような点です。

• パラパラ漫画のような映像になる
• 画質が少し悪い

そもそもGIF動画は動画ファイルではないので画像を一枚一枚パラパラめくるような表示になります。また画質もあまりよくありません。

ただし物事の手順や結果を伝えるだけならGIF動画でも十分なのでよほどのことがない限りはGIFを使った方が良いと思います。

まとめ

ここでは紹介した２つの方法にはメリット・デメリットがありますが画質の鮮明さというのは動画サイト以外では求められないのでGIF動画を貼り付ける方法で十分だと思います。

もし長時間動画を埋め込みたいなら動画ファイルを直接埋め込むのではなくYoutubeから埋め込むという方法をとりましょう。

以上動画を記事内に埋め込む方法について解説しました。

The post WordPressで記事内にGIF動画や動画ファイルを埋め込む方法 first appeared on Fukuro Press.

WordPressサイト内ではYoutubeから動画を埋め込みコードを取得して貼り付けるだけで簡単に動画を埋め込むことが可能です。

次の記事でも動画の埋め込み方やプライヤーのカスタマイズについて解説しました。

Youtube動画をWordPressにカスタマイズして貼り付ける方法

Youtube動画は埋め込みコードを取得して、それ貼り付ければWordPressに埋め込めます。ただし通常オプションだと動画サイズとかループ再生設定ができないのが不便です。そこで埋め込み動画のカスタマイズ方法をまとめました。

fukuro-press.com

2019-02-02 14:57

ところが複数の動画をまとめた再生リストを埋め込もうとした場合は単一の動画のようにYoutube側で埋め込みコードを取得することができないので、自分で埋め込みコードを作成する必要があります。

自分で作成と言ってもそんなに難しい作業ではないのでここではWordPressで再生リストを埋め込む方法について解説します。プラグインなども一切必要ありません。

再生リストの埋め込み方

ではまずYoutubeで埋め込みたい再生リストのあるページを開きます。

そこで下の画像でオレンジ色の下線で示した「list=」の右側にある再生リストのIDをコピーしてください。

コピーしたらWordPressの記事編集画面を開いて次の埋め込みコードを入力します。このとき必ずこのコードをHTMLエディタに入力してください。ビジュアルエディタにコードを書いてしまうと埋め込みが失敗します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/?listType=playlist&list=[コピーしたID]" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[コピーしたID]という部分は先ほどコピーした再生リストのIDに書き換えてください。

重要なのはiframeタグのsrc内で「listType=playlist&list=[再生リストID]」と指定することです。こうしなければ再生リストになりません。

実際に記事内に埋め込んだのが次の再生リストです。

普通の埋め込み動画と見た目があまり変わりませんが、左上のプレイリストボタン(←このようなボタン)を押すと再生リストらしく動画一覧が表示されます。

再生リストの埋め込みに使ったコードはYoutube側で提供されている埋め込みコードを少し変えただけなのでプラグインなども一切必要ありません。

再生リストのカスタマイズ

再生リストの埋め込みコードのsrc属性内のURLに次のようにクエリパラメータをつけることでプレイヤーのデザインなどを変更することが可能です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/?listType=playlist&list=[再生リストID]&パラメータ1&パラメーター2&..." frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

次はこのパラメーターを指定して再生リストをカスタマイズする方法について紹介します。

コントロールの非表示

動画プレイヤーの再生ボタンやシークバーなどのコントロールを表示したくない場合は埋め込みコードのsrc内のURLに次のパラメーターをつけます。

&controls=0

次が埋め込みコードの例です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/?listType=playlist&list=PLtEsoiqGfCp0D0hya10QGpHCuWQCMQqg7&controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

以下がこのコードを埋め込んで作った再生リストです。

動画のタイトルとコントロールの非表示

動画プレイヤーの上部には下の画像で示したように動画タイトルや「後で再生」ボタン、「共有」ボタン、再生リストボタンが表示されます。

この上部のタイトルやコントロールを非表示にしたい場合は埋め込みコードのsrc内のURLに次のパラメーターを追加します。

&showinfo=0

以下が上部タイトルとコントロールを非表示にした埋め込みコードの例です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/?listType=playlist&list=PLSEX2kbdWLC0MUK5Nyy1xQYPzX1UoLz0W&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

以下がこのコードを埋め込んで作った再生リストです。

関連動画の非表示

Youtube動画を埋め込んだ場合、動画の終了時や一時停止時に関連動画が表示されます。

埋め込みたい動画とは無関係なので関連動画を表示したくない場合は埋め込みコードのsrc内のURLに次のパラメーターを付け加えてください。

&rel=0

次が関連動画非表示の埋め込みコードの例です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/?listType=playlist&list=PLSEX2kbdWLC0MUK5Nyy1xQYPzX1UoLz0W&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

次がこのコードを埋め込んで作った再生リストです。動画の再生中に停止ボタンを押すと関連動画が表示されないことが分かります。

Youtube以外で動画を埋め込む方法

ここではYoutubeから再生リストを引用する形で埋め込む方法を紹介しました。

しかし引用するだけでなく次の２つのように自分で動画を用意して直接記事内に埋め込むことも可能です。

• Gif動画を作成して埋め込み
• 動画ファイルそのものを埋め込み

この２つの埋め込み方や使い分けの仕方については次の記事でまとめて紹介しました。

WordPressに動画を埋め込むための３つの手段と使い分け方

WordPressで動画を埋め込む手段は大きく分けて３つあります。ここではその３つのやり方とそれぞれの正しい使い分け方について詳しく解説していきます。それぞれの方法にメリット・デメリットがあるので目的に応じて使い分けることが大事です。

fukuro-press.com

2019-04-20 10:00

どの方法にもメリット・デメリットがあるので用途に合わせて適切に使い分け方をするのが大事ですね。

まとめ

Youtubeでは動画の埋め込みコードを取得する機能はありますが、再生リストの埋め込みコードは取得できません。

できればYoutube側で取得できれば便利ですが、ここで紹介したように埋め込みコードのURLの最期に「listType=playlist&list=[再生リストID]」をつけるだけで普通の動画のように埋め込めます。

以上Youtubeの再生リストを記事内に埋め込む方法について解説しました。

The post Youtube再生リストをWordPressにプラグインなしで埋め込む方法 first appeared on Fukuro Press.

WordPressにYoutube動画を貼り付けるにはYoutubeから動画埋め込みコードをコピーして直接貼り付けるだけです。

しかしただ貼り付けるだけでなく動画サイズや再生方法などは貼り付け時のオプションや埋め込みコードを編集することでカスタマイズ可能です。

ここではYoutube動画をWordPressに貼り付けてカスタマイズする方法を解説します。

Youtube動画の貼り付け方

まず貼り付けたい動画のYoutubeページにアクセスしましょう。

動画にアクセスしたら再生プレイヤーの下に「共有」と書かれた場所があるのでそこを押すと次のような共有メニューが出てきます。

このメニューの「埋め込み」ボタンを押すと次のような埋め込みコードを取得するダイアログが現れます。

このコードをそのままコピーしてWordPressの編集画面（ビジュアルエディターではなくHTMLエディターの方）に貼り付ければサイトに動画が表示されます。

以下は実際にyoutubeから貼り付けた動画のサンプルです。

手順はたったこれだけ

埋め込みコードをただコピペして貼り付ければいいだけです。プラグインとかも使う必要がないので簡単ですね。

埋め込み動画のカスタマイズ方法

では次にオプションなどを編集して埋め込み動画をカスタマイズする方法を紹介します。

・埋め込みオプションの設定

動画の埋め込みコードを取得する際に次のように埋め込みオプションを選んで表示方法をカスタマイズできます。

デフォルトでは上３つ全てにチェックが付いていますが各オプションのチェックを外した場合、動画の表示方法は次のように変わります。

(1).「動画が終わったら関連動画を表示する。」からチェックを外した場合

動画終了時に関連動画が表示されず動画のサムネが表示されます。

(2).「プレイヤーのコントロールを表示する。」からチェックを外した場合

プレイヤーのシークバーや再生・停止ボタンが一切表示されません。

(3).「動画タイトルとプレイヤーの操作を表示する。」からチェックを外した場合

プレイヤー上に表示されるタイトルと共有ボタンが表示されなくなります。

・再生開始時間の設定（途中から再生開始）

最初からではなく動画を途中から再生したい場合は埋め込みコードの取得画面から「開始位置」にチェックを入れ再生開始時間を入力することでその位置から再生できます。

この設定は埋め込みコードを取得した後からでも変更でき、埋め込みコードのURL中の「start」オプションに次のように秒数を渡すだけです。

https://www.youtube.com/embed/[動画ID]?showinfo=0&start=秒数

例えばもし２分３０秒から動画を再生したいならstartに秒換算した150を渡します。

実際に再生開始時間を５秒後から指定したのが次の埋め込み動画です。

・動画プレイヤーサイズの設定

プレイヤーサイズを変更するには埋め込みコードの「width」と「height」を編集します。

例えば次が幅を480px、高さ270pxにした埋め込みコードの例

<iframe width="480" height="270" src="https://www.youtube.com/embed/vWFopgXD2LA?start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

好きな幅・高さに変更するには太字の部分を変更するだけです。

ちなみに推奨サイズはピクセル単位で480x270以上の大きさ、アスペクト比(横:縦の比率)は16:9が理想的です。

・ループ再生するかどうかの設定

標準のオプションではループ再生するオプションはないのでコード側で設定する必要があります。そのコード設定のやり方は次の通りです。

まず埋め込みコードの動画IDの最期に「loop=1」というオプションを付加

https://www.youtube.com/embed/[動画ID]?loop=1

これだけだと動かないのでさらに  playlist=[動画ID]  の文字列を追加

https://www.youtube.com/embed/[動画ID]?loop=1&playlist=[動画ID]

例えば動画IDが「vWFopgXD2LA」の場合は次のような指定の仕方になります。

https://www.youtube.com/embed/vWFopgXD2LA?loop=1&playlist=vWFopgXD2LA

全体の埋め込みコードとしては次の通り

<iframe width="560" height="315" src="https://www.youtube.com/embed/vWFopgXD2LA?rel=0&loop=1&playlist=vWFopgXD2LA" frameborder="0" allow="autoplay; encrypted-media"></iframe>

次が実際にループ設定した埋め込み動画です。一度再生が終了すると自動でリロードします。

Youtube以外で動画を埋め込む方法

以上がWordPressにYoutube動画を埋め込みする方法・・・なんですが、実はこれ以外にも次の手段を使えば動画を埋め込むことは可能です。

• Gif動画を作成して埋め込み
• 動画ファイルそのものを埋め込み

この２つの埋め込み方や使い分けの仕方については次記事をご覧ください。

WordPressに動画を埋め込むための３つの手段と使い分け方

WordPressで動画を埋め込む手段は大きく分けて３つあります。ここではその３つのやり方とそれぞれの正しい使い分け方について詳しく解説していきます。それぞれの方法にメリット・デメリットがあるので目的に応じて使い分けることが大事です。

fukuro-press.com

2019-04-20 10:00

どの方法にもそれぞれメリット・デメリットがあるので用途に合った使い分け方をするのが大事だと思います。

まとめ

以上ここではyoutube動画をWordPressに埋め込む方法についてでした。

WordPressでのYoutube動画の埋め込み方は簡単でただ埋め込みコードをコピーしてきて貼り付けるだけなのでとても簡単です。

もし再生時間の指定やプレイヤーサイズ・ループが必要ならコードにオプションを追加してください

The post Youtube動画をWordPressにカスタマイズして貼り付ける方法 first appeared on Fukuro Press.