ワードプレス（WordPress）の投稿時に、

YouTube動画をレスポンシブ（スマホ対応）で掲載する方法

備忘録

今までYoutube動画を記事に挿入する時、

テキスト入力にしてiframeで囲んで書いてました。

でもスマホシェアがここまで拡大してしまった現在、

無視する訳いかなくなったので、自作テーマをカスタマイズしました。

そう言えば、いつの間にかyoutube のURLを入力するだけで、

自動的にプレイヤーが生成表示さることを知ったのは、

極々最近の私です。ｳﾌﾌ

参考にしたページはこちら↓

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

参考にしたページを更にカスタマイズ。

パソコンで見る場合、youtube動画の左右にマージン作り、

記事内の中央に表示させるようする。

スマホだと画面が小さいからマージンをなくし、記事内いっぱいに表示する。

※動画の左右のマージンは、画面の横サイズが640px以上で表示される

設定にしてあります。

いじるファイルは2つ

 /wp-content/themes/テーマ名/functions.php

 /wp-content/themes/テーマ名/style.css

functions.phpに追記

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '
<div class="youtubebox">
<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>
</div>
', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

style.cssに追記

.youtubebox { margin:0 10%;}

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

@media screen and (max-width: 640px) {
.youtubebox { margin:0;}
}

※ あくまでも自作テーマのカスタマイズです。

どこからかフリーで貰ってきたテーマだと、たま～に配布元がアップデートするから、

その時いじった2つのファイルもアップデートされちゃって、

自分でカスタマイズしたところは消えてしまいます。

そこらは気をつけなければです。

しまい

ワードプレス（WordPress）4.8に追加された新機能「動画ウェジェット」。

サイドーバーに気に入った動画（Youtubeなど）を表示させる機能。

当方の自作ブログ「HCZ BLOG」に、

Youtube動画を表示させようと試みましたが・・・

サポートされたファイル形式および MIME タイプの動画が見つかりませんでした。

深く考えず却下。

今まで通り「カスタムHTML」を使うことにします。

タグは参考まで

<div style="text-align:center">
<iframe width="238" height="134" src="https://www.youtube-nocookie.com/embed/XMOZxsQ101M?rel=0" frameborder="0" allowfullscreen title="Youtube">Youtube</iframe>
<br>
<iframe width="238" height="134" src="https://www.youtube-nocookie.com/embed/ShQuATpv744?rel=0" frameborder="0" allowfullscreen title="Youtube">Youtube</iframe>
</div>

しまい

ワードプレス（WordPress）4.8に追加された新機能「画像ウェジェット」。

サイドーバーに気に入った画像を表示させる新機能。

使わない手はないね。

と言うことで、導入してみました。

使い勝手はどんなもんか？レビューです。

ダッシュボードのサイドバー「外観」→「ウェジェット」を開く。

赤枠の画像と書かれた白枠をドラッグして、

表示させたいサイドバーにドラッグ移動。

ただそれだけでドンーンと機能設置完了。

「タイトル」に記述。例「ZEPHYR1100 CUSTOM」

それから「画像を追加」ボタンをクリック。

URLから挿入を選択して、画像のURLを記述し、

画像にはリンク貼りたいから「カスタムURL」を記述。

どう表示されているか確認する。

あれ？

画像に薄く枠があり、キャプションの文字が大きい過ぎる。

自作テーマだから仕方ないか・・・。

あっさり導入を諦める。

因みに、

今までは「カスタムHTML」を使い、こう表示させていました。

やはり当ブログでは「カスタムHTML」の方がよさげ。

タグ打ちこそメンドイけど、レイアウトいじれるからね。

しまい

ロボットによるスパム投稿を阻止するための機能を、

WordPress（プラグイン）DW Question & Answerに実装しました。

今回はGoogleが提供する公式システム「reCAPTCHA」を利用。

設定・実装する方法を解説します。

※ワードプレス（php）・ホームページ（html）どちらでも同じように設置可能です。

DWQAには「Google Captcha (reCAPTCHA) by BestWebSoft」などのプラグインは

実装できないシステムになっているので、直接ページに設置しなければいけません。

Google reCAPTCHAを利用するための準備

参考ページ：シンカー

ロボットのスパム投稿を阻止するポイントは・・・

「送信ボタン」を押させない措置をする。

DW Question & Answer 内の設置する2ページ

バージョン 1.4.3.4

１.質問フォーム（question-submit-form.php）

/wp-content/plugins/dw-question-answer/templates/question-submit-form.php

11行目を下記に変更

<form method="post" class="dwqa-content-edit-form" id="recaptcha-form">

reCAPTCHAを表示させたい箇所に記述

<div class="g-recaptcha" data-callback="RecaptchaCallback" data-sitekey="あなたのSite key"></div>

送信ボタンに「disabled」を追記し無効にさせる

<input type="submit" name="dwqa-question-submit" value="<?php _e( 'Submit', 'dwqa' ) ?>" disabled>

＜/form＞直下にスクリプトを2つ追記

<script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>
    <script>
 function RecaptchaCallback( code )
{
	if(code != "")
	{
		$( '#recaptcha-form input , #recaptcha-form submit' ).removeAttr( 'disabled' ) ;
	}
}
</script>

２.回答フォーム（answer-submit-form.php）

/wp-content/plugins/dw-question-answer/templates/answer-submit-form.php

13行目を下記に変更

<form name="dwqa-answer-form" id="recaptcha-form" method="post">

reCAPTCHAを表示させたい箇所に記述

<div class="g-recaptcha" data-callback="RecaptchaCallback" data-sitekey="あなたのSite key"></div>

送信ボタンに「disabled」を追記し無効にさせる

<input type="submit" name="submit-answer" class="dwqa-btn dwqa-btn-primary" value="<?php _e( 'Submit', 'dwqa' ) ?>" disabled>

＜/form＞直下にスクリプトを2つ追記

<script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>
    <script>
 function RecaptchaCallback( code )
{
	if(code != "")
	{
		$( '#recaptcha-form input , #recaptcha-form submit' ).removeAttr( 'disabled' ) ;
	}
}
</script>

・コメントフォーム（comments.php）

/wp-content/plugins/dw-question-answer/templates/comments.php

DWQA設定のパーミッション（権限）で匿名はコメント可にしている場合、

上記と同じように書き換えしてください。

当DWQAはレスポンシブに改良してあるので、スタイルをこう設定してあります。

参考まで

KAWASAKI Motorcycle Q&A　質問フォーム

質問フォーム「送信ボタン」スタイルの場合

<input type="submit" name="dwqa-question-submit" value="<?php _e( 'Submit', 'dwqa' ) ?>" 
style="width:50%; height:30px; font-weight:bold; margin:24px 25% 10px" disabled>

以上

前回はDW Question & Answer　1.4.5 のバグについて対処法を説明し、

旧バージョン（バージョン1.4.3.4）をお勧めしましたが、

今度はその旧バーションにも脆弱性が見つかりました。

DWQA設定 パーミッションの、質問・回答・コメントが、

匿名投稿可になっている場合、

ある日突然、ロボットによるスパム投稿（攻撃）を受けてしまいます。

一度ロボットにロックオンされてしまうと、止め処なくスパム投稿されてしまいます。

では、この匿名投稿を不可（チェックを外す）にすれば防げそうに思えますが、

先ほど話したように「止めどなくスパム投稿されてしまう」理由は、

パーミッションでの制御が出来なくなると言う事です。

つまり、チェックを外して変更を保存（Save Changes）しても、

チェックを外せなくなります。これは悪質なスパムロボットの仕業です。

※早い段階でスパムに気付けばパーミッション制御は可能かも。

パーミッションの制御を回復するには・・・

DWQA設定 ＞ 一般設定 ＞ 質問が表示される前　にチェックを入れ変更を保存する。

スパム投稿（質問）を幾つか認証待ちにさせるとパーミッションの制御が可能になります。

その後の処置として、スパム投稿を全て削除する。

スパムなタグを全て削除。

スパム回答・コメント（Answers）を全て削除。

以上でスパム投稿（質問＆回答）は回避できますが、匿名投稿は出来なくなります。

ん・・・

登録なしで、誰でも簡単に匿名投稿できるようにしたい！！思いもあり、

現在模索してますが、

試しにプラグイン「Google Captcha (reCAPTCHA) by BestWebSoft」を

インストールしてみました。

これはGoogleが提供するシステムで、ロボットによるスパム投稿を排除させます。

設定を終え、投稿フォームにショートコードを記述する。

結果、残念ながら当ブログ（Wordpress）ではうまく起動しませんでした。

ショートコードが利用できない。認識しない。

後に、直接PHPをいじれば実装できることが判明。

その設定方法は追伸↓をご覧ください。

追伸

ロボットによるスパム投稿の撃退方法は「Google reCAPTCHA」を実装・・・

DW Question Answerをカスタマイズ　ベストアンサー偏です。

DWQAには回答にベストアンサーを選ぶことが出来ます。

がぁ、どこにその選択があるか、ぱっと見分かりません。

分かったところでもただのチェックマーク（レ点）にしか過ぎず、

インパクトに欠けます。

※ 通常はグレーのレ点で、ベストアンサーにすると色がグリーンに変わります。

やはり某知恵袋みたいな感じにしたいですよね。

でぇ、私的に画像を使って改良してみました。

バージョンは DW Question Answer1.4.3.4　　いじるファイルはstyle.css

保存先階層は ・・・

/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

※ style.cssに手を加えている場合、変更するところ（行数）が変わります。

いじるところは「 .dwqa-pick-best-answer:after 」で、css内を検索して探してください。

変更前

.dwqa-pick-best-answer:after {
 content: '';
 display: block;
 width: 15px;
 height: 25px;
 border: solid #ddd;
 border-width: 0 5px 5px 0;
 transform: rotate(45deg);
 position: absolute;
 left: 10px;
 top: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.dwqa-pick-best-answer:hover:after {
 border-color: #999;
}

.dwqa-best-answer .dwqa-pick-best-answer:after {
 border-color: #578824;
}

変更後

.dwqa-pick-best-answer:after {
 content: '';
 display: block;
 width: 15px;
 height: 25px;
 position: absolute;
 left: 2px;
 top: 7px;
 padding-right:170px;
 background: url(../img/answer-off.png) no-repeat;
}

.dwqa-pick-best-answer:hover:after {
 background: url(../img/answer-on.png) no-repeat;
 
}

.dwqa-best-answer .dwqa-pick-best-answer:after {
 left: 320px;
 top: -150px;
 background: url(../img/best-answer.png) no-repeat;
}

利用した画像は3つ。（コピペOKです）

ファイル名：best-answer.png（162×19px）

ファイル名：answer-off.png（32×22px）

ファイル名：answer-on.png（180×22px）

画像の保存場所

/wp-content/plugins/dw-question-answer/templates/assets/img/ここにアップロード

変更後には変化は見られませんが、オンマウスすると

クリックするとベストアンサーに選ばれ、こう表示されます。

施したQ&Aサイトは「KAWASAKI Motorcycle Q & A」です。

しまい

WordPress(ワードプレス)でテーブル（表）のレイアウトが簡単変更できるがプラグイン

「TablePress」を導入しました。

以前からテーブルのレイアウトをいじるのに、面倒なことやっていたのですが、

プラグインを探してみると、この手が結構あるんですね。

実装方法は簡単。

WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「TablePress」で検索し、

インストールして有効化。管理画面サイドバーに項目が追加される。

サイドバーの「新しいテーブルを追加」で表を作成し、出来上がった表の

「ショートコードID」を記事内に記述すれば表示される。

使用方法はさほど難しくない。

使用感としては、一度作成した表（テーブル）を、先々編集（行や列の追加）する

場合は便利なプラグインだと思うが、それ以外だと一度こっきりの単純なテーブル

を、いちいちプラグインで作成管理するのは面倒臭いから不向きかも。

細かい装飾はプラグインのオプション「カスタムCSS」でコマンドを追加する必要が

あるので、結局は簡単でもないし、CSSを理解していないと使えないプラグインでした。

試しに固定ページでプラグイン使って作ってみました。

YouTube チャンネル解析レポート

カスタムCSS

.tablepress-id-1 {
	margin: 0 auto;
	font-size: 12px;
	width: 80%;
}

.tablepress-id-1 th {
	text-align: right;
}

.tablepress-id-1 td {
	text-align: right;
}

しまい

DW Question Answer ＋ BuddyPress　を導入にあたり、カスタマイズしたこと。

【 備忘録 】

※ 今回行ったカスタマイズは、全て「functions.php」に記載する。

アップロード先： /wp-content/themes/テーマ名/functions.php

・ログイン中の管理バーカスタマイズ

管理バーの左端にワードプレスのロゴ（Wordpressについて）を削除。

その他、必要なさそうな項目も序に削除。

//管理バー項目削除
function remove_bar_menus( $wp_admin_bar ) {
    $wp_admin_bar->remove_menu( 'wp-logo' );      // ロゴ
    $wp_admin_bar->remove_menu( 'view-site' );    // サイト名 - サイトを表示
    $wp_admin_bar->remove_menu( 'dashboard' );    // サイト名 - ダッシュボード
    $wp_admin_bar->remove_menu( 'themes' );       // サイト名 - テーマ
    $wp_admin_bar->remove_menu( 'customize' );    // サイト名 - カスタマイズ
    $wp_admin_bar->remove_menu( 'comments' );     // コメント
    $wp_admin_bar->remove_menu( 'updates' );      // 更新
    $wp_admin_bar->remove_menu( 'view' );         // 投稿を表示
    $wp_admin_bar->remove_menu( 'new-content' );  // 新規
    $wp_admin_bar->remove_menu( 'new-post' );     // 新規 - 投稿
    $wp_admin_bar->remove_menu( 'new-media' );    // 新規 - メディア
    $wp_admin_bar->remove_menu( 'new-link' );     // 新規 - リンク
    $wp_admin_bar->remove_menu( 'new-page' );     // 新規 - 固定ページ
    $wp_admin_bar->remove_menu( 'new-user' );     // 新規 - ユーザー
    $wp_admin_bar->remove_menu( 'search' );       // 検索
}
add_action('admin_bar_menu', 'remove_bar_menus', 201);

・ダッシュボード内の表示オプションとヘルプを削除

//ダッシュボード　ウィジェットを削除(管理者以外)
function remove_dashboard_widget() {
	if ( ! current_user_can( 'administrator' ) ) {
	 	remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' ); // 概要
	 	remove_meta_box( 'dashboard_activity', 'dashboard', 'normal' ); // アクティビティ
	 	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' ); // クイックドラフト
	 	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' ); // WordPressニュース
	}
} 
add_action('wp_dashboard_setup', 'remove_dashboard_widget' );

※前もって表示オプションの「概要」と「アクティビティ」は表示させ、必要に応じて

上記記述を入力・削除で調整する。ただし新規のユーザー登録者には

デフォルト時に表示されてしまうので、これもやっておく。

・管理画面下部の「Wordpressのご利用ありがとうございます。」を削除

//管理画面下部の「Wordpressのご利用ありがとうございます。」を削除
add_filter('admin_footer_text', '__return_empty_string');

・管理画面下部のバージョン番号を削除

//管理画面下部のバージョン番号を削除
function remove_footer_version() {
	remove_filter( 'update_footer', 'core_update_footer' ); 
}
add_action( 'admin_menu', 'remove_footer_version' );

・ログインロゴのカスタマイズ

function my_login_logo() { ?>
    
<style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/login-logo.png);
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );


//ログインロゴのリンク先変更
function login_logo_url() {
    return get_bloginfo('url');
}
add_filter('login_headerurl', 'login_logo_url');


//ログインロゴのtitle属性を変更
function login_logo_title(){
    return get_bloginfo('name');
}
add_filter('login_headertitle','login_logo_title');

※オリジナルロゴ（画像）のアップロード先

/wp-content/themes/テーマ名/images/login-logo.png

元画像サイズは（幅80px、高さ80px）

これ以上のサイズでも問題ないが、元画像サイズに自動縮小される。

・送信メールのカスタマイズ

送信メールはデフォルトで送信者名(差出人名)が「WordPress」、送信元アドレスが

「wordpress@サイトのドメイン名」になっているので、独自のものに変更。

//メールの差出人名を変更
function custom_mail_from_name( $from_name ) {
	return 'KAWASAKI Motorcycle Q & A';
}
add_filter( 'wp_mail_from_name', 'custom_mail_from_name' );
 

//メールの送信元アドレスを変更
function custom_mail_from( $from_email ) {
	return 'info@hcz.jp';
}
add_filter( 'wp_mail_from', 'custom_mail_from' );

しまい

WordPress プラグイン　DW Question Answer

日本語化するファイルを自作しました。

2つのファイル（ dwqa-ja.po / dwqa-ja.mo ）をアップロードするだけで、

日本語化されます。ダウンロードしてご自由にお使い下さい。

※圧縮ファイル（zip）は、解凍してお使い下さい。

ファイルのアップロード先

***/wp-content/plugins/dw-question-answer/languages/

ダウンロードファイル（フリー）

DW Question Answer Version 1.5.7

日本語化ファイル ： dw-question-answer-ja-1.5.7.zip（size 22KB）

同梱ファイル： dw-question-answer-ja.po　/　dw-question-answer-ja.mo

最終更新日：2019-12-22

DW Question Answer Version 1.4.5

日本語化ファイル ： dwqa-ja-1.4.5.zip（size 22KB）

同梱ファイル： dwqa-ja.po　/　dwqa-ja.mo

最終更新日：2016-08-22

DW Question Answer Version 1.4.3.4

日本語化ファイル ： dwqa-ja-1.4.3.4.zip（size 22KB）

同梱ファイル： dwqa-ja.po　/　dwqa-ja.mo

最終更新日：2016-06-06

更新履歴

• 2019-12-22　バージョン1.5.7　一部修正しました。
• 2019-12-19　バージョン1.5.7　追加
• 2016-08-22　バージョン1.4.5　追加
• 2016-06-06　一部修正
• 2016-05-29　Eメール機能（通知文） 一部修正
• 2016-05-28　新規作成

ダウンロードページにも「日本語化ファイル」はあります。

ファイルについて、不具合や改善等ありましたらコメントに残しておいて下さい。

ワードプレス（wordpress） プラグイン：AnsPress – Question and answer

バージョン 2.4.8

実装したので備忘録します。

■ AnsPress – Question and answer　初期設定

AnsPressをインストールして有効化すると、

固定ページ一覧にタイトル名「Questions」が生成される。

この固定ページは「AnsPress　Question and answer」の基本ページになるので、

分かりやすいタイトル名「基本ページ」に変更する。

投稿内容に　[anspress]　と記述されているが、消さないように。

このページは、後に設定する表示設定で、フロントページとして利用することが出来ない

システムになっている。利用できる関連のウェジェットが12個追加される。

次に固定ページを3ページ新規追加。
1. タイトル名 ： 任意　スラッグは「question」に変更。

投稿内容に 　[anspress]　 と記述。

※ トップページ（フロントページ）として利用するページです。

2. タイトル名 ： 質問ヘルプ　スラッグは「question-help」に変更。

質問の記入時、ヘルプタブ「質問方法」で利用するページです。

3.タイトル名 ： 回答ヘルプ　スラッグは「answer-help」に変更。

回答の記入時、ヘルプタブ「回答方法」で利用する。

この時点で、固定一覧ページには計4ページなければいけない。

作成した固定ページは、AnsPress オプションで紐付けする。

※紐付けとは、導入したAnsPressプラグインと固定ページを連携させること。

ダッシュボード＞AnsPress＞オプション ＞全般を開く。

「基本ページ」・「質問ヘルプページ」・「回答ヘルプページ」のプルダウンメニュー

から、先ほど作成した3ページを選び、「オプションを保存」する。

念のためにオプション＞ページで、メインページタイトルも変更しておく。

以上で、初期設定は終わりです。

これまでの設定では、管理者だけが質問・回答できるようになる。

もしくは、

ダッシュボード ＞ AnsPress ＞ オプション ＞ パーミッション　で、

「匿名を許可」にチェックを入れると、規制ナシで誰でも質問・回答が出来るようになる。

あとユーザー登録の有無の設定は、

ダッシュボード ＞ 設定 ＞ 一般 ＞ メンバーシップ

で、「だれでもユーザー登録ができるようにする」にチェックする。

必須とも言える、拡張プラグイン

「Tags for AnsPress」「Categories for AnsPress」

もインストールしてみる。

Tags for AnsPress　バージョン 2.0.0

Categories for AnsPress　バージョン 2.0.1

Tags for AnsPressは、タグを入力することで、質問記事をジャンルや題材ごとに分類され、

検索した時にヒットされやすくなる。

Categories for AnsPressはインストールして有効化すると、利用できるウェジェットに

AnsPress（Categories）が生成され、サイドバーに追加する。

次に DB＞Anspress＞Categori カテゴリを作成する。

幾つかカテゴリ作ると、ウェジェット内に表示される。また、質問の投稿ページにカテゴリの

プルダウンメニューが生成される。カテゴリ別に質問を分けられ表示できる。

以上

殆どレクチャーしてるWEBページがなかったので、実装するのに結構時間費やしまた。

使用感は・・・

肝心な所で不具合を起こし、うまく制御できない。

それは、質問が閉じられないこと。

回答を選択（ベストアンサー）した後、質問を閉じる設定がオプションにあるが、

質問が閉じられず、延々と回答を入力する画面が現れてしまう。

質問には「状況」（投稿の状況を変更する）ボタンもあり、

閉じるを選択すると質問が閉鎖される。

「回答は受け付けておりません。」っと、赤くコメントが表示されるだけで、

回答欄は消えることはないし、入力もできます。

何か設定でもミスったのか？

それともバグ？

はたまた有料版だったら大丈夫？

日を改め、データーベース・ワードプレス・プラグインを全部削除し、

設定ミスがないよう初めから構築し直してみました。

しかし、依然と同じように、ベストアンサーしても回答は閉じられません。

これはもうバグですね。

あと気になったことがパーマーリンクです。

質問のタイトルがそのままURLになります。設定での選択肢はありません。

「/question/QUESTION_TITLE」なので、URLのQUESTION_TITLE部分が長くなってしまう。

Googleが推奨するユニークなURLには相当しないです。

よさげなプラグインだと思いましたが残念です。

しまい