WordPress

DW Question & Answer のバグ・脆弱性について WordPressプラグイン

Comment(0) | Trackback(0)

Categories | DW Question Answer


DW Question & Answer のバグ・脆弱性について

WordPressプラグイン

バージョン1.4

 

3年程前に、バイク系Q&Aサイトを自サイトに作成しました。

ベースのワードプレス(WordPress)上に、

無料のプラグイン「DW Question & Answer」をインストールして構築。

 

1114 01 400x260 DW Question & Answer のバグ・脆弱性について WordPressプラグイン

KAWASAKI Motorcycle Q & A

 

現状 WordPressスペック

  • WordPress5.3
  • テーマ 自作
  • php7.3

現在リリースされているバージョン

  • DW Question & Answer バージョン1.5.7

 

現在、古いバージョン(バージョン1.4.3.4)で稼働していますが、

システムに色々と問題(バグ・脆弱)らしきが発生してまして、

その中でも割と安定している1.4.3.4を利用しています。

また、アップデート(バージョンアップ)してしまうとで、

折角自作したstyle.cssに変更が加わってしまこともあり、

新バージョンへ移行することをためらっています。

でも、今後バージョンアップすることを考え、転ばぬ先の杖ってことで、

備忘録しておきます。

 


 

DW Question & Answer バージョン1.4

バグ・脆弱性とその対策の備忘録。

 

投稿(質問・回答・コメント)の際、テキストエディターが使えない。

1114 03 400x267 DW Question & Answer のバグ・脆弱性について WordPressプラグイン

ビジュアルエディタしか使えない仕様なのか?

他のプラグインとの相性も考えられそうだったので、起動中のプラグインを

停止・削除して検証したが改善されない。

対策しようがない。

見て見ぬふり。

 

 

回答にベストアンサーを選んでも、その質問は閉じられない。

手動で「受付終了」をするシステム?

それだと余り意味をなさないような・・・

デフォルトのベストアンサーボタンはショボイ。

しかし、カスタマイズは難しい。

参考ページをご覧ください。

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

 

 

 

バージョン1.4.5は文字化けを連発する

DW Question & Answer バージョン1.4.5 の不具合と対処法

 

 

 

ロボットによるスパム投稿(攻撃)を受けやすい

ひとたび攻撃を受けると、パーミッションでの制御が出来なくなり、

「止めどなくスパム投稿されてしまう」。

DW Question Answer の脆弱性について WordPress プラグイン

 

対策として、

Googleが提供するシステム「reCAPTCHA」を導入することをお勧めする。

実装法を参照。

DW Question & Answer / Google 「reCAPTCHA」 / 実装方法 / ブログ(WordPress)

 

 

今のところこんな感じですが、

「なんだこれ?」みたいな、妙な現象を発見したら追記していきたいと思います。

TAGS: / / / / / | 2019年11月15日 |

バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

Comment(0) | Trackback(0)

Categories | ブログ(WordPress)


WordPressプラグイン【UpdraftPlus】を導入

バックアップ方法を【BackWPup】から【UpdraftPlus】に変更しました

 

何故にBackWPupからUpdraftPlusに移行したかと言いますと、

ここのところBackWPupでDropboxにバックアップすると、

エラーばかりで、バックアップが出来なくなった。

1013 01 400x54 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

この手のエラーを検索すると、多くの解決方法がヒットしますが、

それらを当ブログに投与しても改善はしませんでした。

半年ほど放置プレイ・・・。

たまたまヨサゲな「UpdraftPlus」の記事を見つけたので移行することにしました。

 

当ブログのバックアップ履歴。

BackWPupバージョン2.1.17を導入 2013年2月

BackWPupバージョン3.5.0 不具合があり削除 2018年5月

■BackWPupバージョン3.6.10 ジョブ系エラーで削除 2019年10月

 

サーバースペック等

■XREA / php7.3

■WordPress バージョン5.2.3

■テーマ 自作

 

 

UpdraftPlusの導入方法を簡単に説明

現在のバージョンは1.16.17

1013 02 400x352 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

 

WPダッシュボード > プラグイン > 新規追加>「UpdraftPlus」で検索

1003 03 400x118 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

「今すぐインストール」をポチっと。

↓ ↓

 

1013 04 400x118 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行「有効化」ボタンをポチっと。

※有効化後にはダッシュボード>設定 に「UpdraftPlus Backup」の項目が追加される。

 

 

バックアップデータの保存先は「ドロップボックス」に指定する設定。

1013 06 400x187 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

ダッシュボード > 設定 > UpdraftPlus Backup > 設定 >

「Dropbox」のアイコンをクリックすると、 

 

1013 07 400x134 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

 

↑これが表示される。

後は何もいじらず、一番下にスクロールし「変更を保存」をクリック。

これらが表示される。↓

1013 08 400x97 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

赤枠をクリック。

注)Dropboxには事前にログインしておくこと。

 

1013 09 400x227 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

許可」をクリック。

 

1013 10 400x214 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

Complete setup」をクリックで完了。

Complete setupをクリックした時点で、自動的にバックアップが始まる。

ブログのキャパ等で時間も変わりますが、数分でバックアップが完了する。

 

保存先のドロップスボックスを確認してみる。

1013 11 400x152 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

 

Dropbox > アプリ > UpdraftPlus.Com

1013 12 400x338 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行

7つの圧縮ファイル(zip)を確認。

上から順に、

1.データベース 2.その他 3.プラグイン 3.テーマ 4・5・6アップロード

 

 

その他設定 

当ブログの設定。参考まで

1013 13 400x75 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行バックアップスケジュール

 

 

1013 14 400x39 バックアップ方法(プラグイン)を【BackWPup】から【UpdraftPlus】に移行バックアップ完了のお知らせメール

 

 

しまい

TAGS: / / / / | 2019年10月13日 |

Compress JPEG & PNG images【WordPressプラグイン】|画像圧縮の必須アイテム

Comment(0) | Trackback(0)

Categories | ブログ(WordPress) SEO


Compress JPEG & PNG images【WordPressプラグイン】

画像圧縮の必須アイテム

 

0719 01 400x132 Compress JPEG & PNG images【WordPressプラグイン】|画像圧縮の必須アイテム

 

Compress JPEG & PNG images バージョン 3.2.0

利用環境:WordPress5.2.2 / php7.3 / 自作テーマ

 

何故に画像を圧縮する必要があるのか?

ブラウザの表示スピードが速くなり、観覧する方のストレスを軽減させる上、

サーバーへの負荷も軽減される。また、SEOにも役立つ。

画像圧縮プラグインは検索すると多数ヒットするが、

私が「Compress JPEG & PNG images」を選んだ理由は、

リサイズ機能が備わっていることでした。

 

リサイズ機能(Resize the original image)とは、

0719 02 400x182 Compress JPEG & PNG images【WordPressプラグイン】|画像圧縮の必須アイテム

「幅の上限」または「高さの上限」欄でサイズを指定しておくと、

そのサイズを超えたアップロード画像は、指定サイズに縮小され、

圧縮まで行ってくれるスグレモノ。

いちいち撮った写真等、ソフトを使って小さいサイズに編集する手間が省ける。

 

リサイズ設定は「Original image (overwritten by compressed image)」にチェックを入れてないと表示されない。

0719 03 400x79 Compress JPEG & PNG images【WordPressプラグイン】|画像圧縮の必須アイテム

 

気になることが一つあります。

月の利用上限が画像500枚まで。

更に「リサイズ機能」を利用すると上限は250枚。

0719 05 400x299 Compress JPEG & PNG images【WordPressプラグイン】|画像圧縮の必須アイテム

1ヶ月で250枚の写真をアップロードするだろうか?

仮に月25回ブログを書き、1つの記事で10枚画像をアップするとになりますよね。

当ブログの記事に使う画像は、基本的には横サイズは400px。

だから、アップロード保存したオリジナル画像と、

記事挿入の基本サイズ(400px)画像を圧縮するように指定し、

しばらく様子を見ようと思います。

 

0719 06 400x240 Compress JPEG & PNG images【WordPressプラグイン】|画像圧縮の必須アイテム

 

 

Compress JPEG & PNG imagesのインストールと設定

導入はいたって簡単。

先ずはここで↓AIPキーを取得

Developer API

名前とメールアドレスを記入。

直ぐにメールが届くので「Visit your Dashboard now」をクリック。

表示されたAIPキーをコピーしておく。

 

次にワードプレスの管理画面でプラグインを新規追加。

Compress JPEG & PNG images 」を検索してインストール。

設定 > Compress JPEG & PNG images を開き、

Already have an account?」の欄にAIPキーを入力して保存。

以上

TAGS: / / | 2019年7月20日 |

WordPressの新しいバージョンに更新できません。対処方法

Comment(0) | Trackback(0)

Categories | ブログ(WordPress)


WordPressの新しいバージョンに更新できません。

対処方法

 

現在PHP7.3ですが、ワードプレス本体ではPHP5.3.29と認識され、

WordPressの新しいバージョンに更新できません。

念のためにPHP7.2にもしてみましたが同じ症状。

0603 400x289 WordPressの新しいバージョンに更新できません。対処方法

サポートセンターに問い合わせてみたころ、

下記回答をいただきました。

 

「/wp-admin」の「.htaccess」にて、
「PHP5.3」で動作させる設定が行われているようにお見受けいたします。
現状、「.htaccess」内に
——————–
AddHandler application/x-httpd-phpcgi .php
——————–
の記載がございますため、
こちらの記述をコメントアウト、もしくは削除いただいてから、
警告のメッセージが改善されるかどうかをお試しいただければ幸いでございます。

 

そう深く考えず、「/wp-admin」の「.htaccess」を削除して確認すると、

 

0605 400x300 WordPressの新しいバージョンに更新できません。対処方法

 

見事問題が解決され、新しいバージョンにもバージョンアップできました。

良かった良かった。

因みに削除したファイル、「.htaccess」にはこう記述されていました。

 

<files async-upload.php>
AddHandler application/x-httpd-phpcgi .php
</files>
<Files update.php>
AddHandler application/x-httpd-phpcgi .php
</Files>
<Files update-core.php>
AddHandler application/x-httpd-phpcgi .php
</Files>
<Files xmlrpc.php>
AddHandler application/x-httpd-phpcgi .php
</Files>

 

PHP5.3が標準のサーバーで「.php」をCGI版PHP5.3として動かすコマンド。

何かの意図があり、

数年前に自分でこのファイルを作ったような記憶がうっすらあるようなないような。

「cgi」で動かさなくてはいけない理由もないので、削除して問題ないし。

以上

TAGS: / / / | 2019年6月5日 |

BuddyPress メール 設定 備忘録【WordPress】プラグイン

Comment(0) | Trackback(2)

Categories | ブログ(WordPress) BuddyPress


BuddyPress メール 設定 備忘録【WordPress】プラグイン

「DW Question Answer」と連携した際の設定方法

 

0208 06 400x260 BuddyPress メール 設定 備忘録【WordPress】プラグイン

 

現稼働中なのは「 バージョン 2.7.4 」 です。

バージョンアップを予定しているので、支障がないようBuddyPress

旧バージョン(2.7.4)のメール設定を備忘録。

その他の設定は、「BuddyPress 設定 備忘録」をご覧ください。

 

 

BuddyPress 設定 備忘録【WordPress】プラグイン

 

 

 

追加して公開済みは(16)です。これらはデフォルトでサンプルとして16通作られる。
カスタマイズしたのは随分前のことなので、多分不必要なものもあるかと。

 

– BuddyPress メール設定 バージョン2.7.4 –

【メールのタイトル 16通 】

ダッシュボード > メール

 

※ 受信メールの検証はしてないものもあります。
よって、日本語化されていないメールもありました。

 

項目をいじったり増やしたりの設定は、

「「BuddyPress」を「DW Question Answer」に連携」をご覧ください。

 

こちらはウェブ上でプレビューしたサンプルです。

● [{{{site.name}}}] {{friend.name}} さんがあなたの友達申請を承認しました

0209 01 400x235 BuddyPress メール 設定 備忘録【WordPress】プラグイン

プレビュー

 

{{friend.name}} accepted your friend request.

 

 

● [{{{site.name}}}] {{sender.name}} さんからの新規メッセージ

0209 02 400x241 BuddyPress メール 設定 備忘録【WordPress】プラグイン

プレビュー

{{sender.name}} sent you a new message: “{{usersubject}}”

“{{usermessage}}”

Go to the discussion to reply or catch up on the conversation.

 

 

● [{{{site.name}}}] 新しいメールアドレスを確認してください

0209 03 400x277 BuddyPress メール 設定 備忘録【WordPress】プラグイン

プレビュー

You recently changed the email address associated with your account on {{site.name}}. If this is correct, go here to confirm the change. Otherwise, you can safely ignore and delete this email if you have changed your mind, or if you think you have received this email in error.

 

以上

TAGS: / / / / | 2019年2月10日 |

BuddyPress 設定 備忘録【WordPress】プラグイン

Comment(0) | Trackback(1)

Categories | ブログ(WordPress) BuddyPress


BuddyPress 設定 備忘録【WordPress】プラグイン

「DW Question Answer」と連携した際の設定方法

 

0206 01 400x303 BuddyPress 設定 備忘録【WordPress】プラグイン

前回のバージョンアップから、長い間放置していいたプラグイン「BuddyPress」。

かれこれ4年くらいは放置してました。現稼働中なのは「 バージョン 2.7.4 」 です。

で、現在のリリースは「 バージョン 4.1.0 」。

バージョン 2.7.4 → 4.1.0 となる訳ですが、

ヤバくねぇ?

色々な機能が追加され、進化したであろう未知のバージョンです。

そこで、今までの設定等、パーになってしまわないかと心配になり、

備忘録しておくことにしました。

 

先ず、WordpressにBuddyPressをインストールして有効化すると、

ダッシュボード(管理画面)に3つの設定が追加されます。

1.ダッシュボード > メール

2.ダッシュボード > ツール > BuddyPress

3.ダッシュボード > 設定 > BuddyPress

この3つの設定方法を備忘録しました。

 

– BuddyPress 設定 バージョン2.7.4 –

ダッシュボード > 設定 > BuddyPress

 

 

● コンポーネント

0208 01 400x304 BuddyPress 設定 備忘録【WordPress】プラグイン

全10項目

使用中:5項目

1.拡張プロフィール
ユーザーが自己紹介できる編集可能なプロフィール欄を使って、コミュニティをカスタマイズしましょう。

2.アカウント設定
ユーザーがプロフィールから直接アカウントや通知設定を編集できるようにします。

3.通知
ツールバーのバブルやメールで最近のアクティビティをメンバーに通知し、メンバーが通知設定をカスタマイズできるようにします。

4.コミュニティのメンバー
BuddyPress のコミュニティはすべて、メンバーが中心となっています。

5.BuddyPress コア
BuddyPress の機能を有効化するために必要です。

 

停止中:5項目

1.友達関係
ユーザーがお互い友だちになり、気になっている人のアクティビティを集中してフォローできるようにします。

2.プライベートメッセージ
ユーザー同士が直接、非公開で話すことができるようになります。一対一の話し合いだけではなく、メッセージは複数メンバー間でも送信できます。

3.アクティビティストリーム
スレッド化コメント、直接投稿、お気に入りや @ メンションを含んだ全体・個人・グループのアクティビティストリームのすべてが、RSS フィードとメール通知に対応しています。

4.ユーザーグループ
グループを使うことで、アクティビティストリームやメンバー一覧とは別の、メンバー同士が話し合える公開または非公開の場を設定できます

5.サイトトラッキング
サイトの新しい記事とコメントを記録します。

 

必須:2項目

1.BuddyPress コア

2.コミュニティのメンバー

 

リタイヤ済み:1項目

1.グループのフォーラム
BuddyPress フォーラムは廃止されました。bbPress をお使いください。

 

 

 

● 固定ページ

0208 02 400x252 BuddyPress 設定 備忘録【WordPress】プラグイン

ディレクトリ
WordPress 固定ページを各 BuddyPress コンポーネントディレクトリと関係づける。
メンバー:メンバーの表示↓

0208 04 300x225 BuddyPress 設定 備忘録【WordPress】プラグイン

登録
WordPress ページを以下の BuddyPress 登録ページと関連付ける。
登録:登録の表示 → https://www.hcz.jp/qa/
有効化:有効化の表示 → https://www.hcz.jp/qa/

 

 

 

● 設定

0208 03 400x329 BuddyPress 設定 備忘録【WordPress】プラグイン

メイン設定

ツールバー

アカウント設定 ☑

プロフィール設定

プロフィール写真のアップロード ☑

カバー画像のアップロード ☑

プロフィール同期 ☑

 

 

 

● BuddyPressツール

0208 05 400x197 BuddyPress 設定 備忘録【WordPress】プラグインダッシュボード > ツール > BuddyPress

BuddyPress keeps track of various relationships between members, groups, and activity items. Occasionally these relationships become out of sync, most often after an import, update, or migration.

手動でこれらのつながりを再計算するには、以下のツールを使ってください。

これらのツールの中には、かなりのデータベースのオーバーヘッドを生ずるものがあります。一度に複数の修復ジョブを実行しないでください。

 

ツールは、何かを設定する項目ではありません。基本いじりません。

では、どう利用するかと言いますと、

メール設定で、サンプルの項目を作る場合など、

修復ツール「Reinstall emails (delete and restore from defaults).」

にチェックを入れ、「項目を修復」をクリックすると、サンプルが新たに生成されます。

 

 

 

 

● BuddyPressメール

0208 06 400x260 BuddyPress 設定 備忘録【WordPress】プラグイン

すべて(16)|公開済み(16)

こちらの設定は項目が多くあるので、別ページにて備忘録いたします。

BuddyPress メール 設定 備忘録【WordPress】プラグイン

 

以上

TAGS: / / / / | 2019年2月9日 |

BuddyPress(WordPress)プラグイン カスタマイズ集

Comment(0) | Trackback(0)

Categories | ブログ(WordPress) BuddyPress


BuddyPress(WordPress)プラグイン

カスタマイズ集

 

0206 01 400x303 BuddyPress(WordPress)プラグイン カスタマイズ集

BuddyPressは、WordPress上にプラグインとしてインストールすることで、

独自のSNS機能が利用できる。

 

私が今までカスタマイズしたことを備忘録しておきます。

BuddyPressの編集でお困りの方は、参考にしていただければ幸いです。

インストール方法(実装)は簡単なので、ここではあえて深く語りません。

 

  1. 配信メールの文字化け 対処方法
  2. プロフィール写真を変更のカスタマイズ
  3. BuddyPress を「DW Question Answer」に連携
  4. BuddyPressのバージョンアップに子テーマは必須
  5. BuddyPress 設定 備忘録

 


 

1. 配信メールの文字化け 対処方法

BuddyPress 配信メールの文字化け 対処法(wordpress プラグイン)

 

 


 

 

2. 「プロフィール写真を変更」のカスタマイズ

BuddyPress 「プロフィール写真を変更」ページのカスタマイズ

 

編集ファイル

/wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/members/single/profile/change-avatar.php

 

 


 

 

3. 「BuddyPress」を「DW Question Answer」に連携

「BuddyPress」を「DW Question Answer」に連携

 

編集ファイル

/wp-content/themes/functions.php

 

 


 

 

4. BuddyPressのバージョンアップに子テーマは必須

BuddyPress(ワードプレス プラグイン)の子テーマは必須。作成方法

 

BuddyPressのテーマが置かれている階層は、

wp-content/plugins/buddypress/bp-themes/bp-default

この「bp-default」が BuddyPress のデフォルトテーマになります。

 バージョンアップされると、ここが更新される。

 

 


 

 

5. BuddyPress 設定 備忘録

BuddyPress 設定 備忘録【WordPress】プラグイン

 

バージョンアップのための、バックアップ的な記事。

TAGS: / / / | 2019年2月6日 |

SyntaxHighlighter Evolved 文字サイズを指定する方法

Comment(0) | Trackback(0)

Categories | ブログ(WordPress)


SyntaxHighlighter Evolved 文字サイズを指定する方法

03 01 400x280 SyntaxHighlighter Evolved 文字サイズを指定する方法

SyntaxHighlighter Evolved とは、

ワードプレス(WordPress)のプラグイン(機能拡張)。

ブログ記事内にソースコード(html・css等)を文字化けすることなく、

きれいに表示できます。

しかし、ある程度サイト作成などのスキルが必要とされ、

素人が簡単に利用できるものではないと思う。

現バージョンは「3.5.0

WordPress の必須バージョン: 4.2.3以上

 

導入時のカスタマイズ

SyntaxHighlighter Evolved(ワードプレス プラグイン)のカスタマイズと使用方法

 

良くやってしまう失敗として、

テキストエディタでの記述では問題なく利用できるが、

途中でビジュアルエディタに切り替えてしまうと、その機能を果たさなくなる。

つまり、やっぱり文字化けしてしまう。

そこらへん気を付けなければいけない。

 

ところで本題ですが、

SyntaxHighlighterを導入した数年前

当初は文字がデカくなってフォントサイズをカスタマイズしましたが、

本体の不定期なアップデートで、その情報が上書きされ消滅してました。

それらを回避するため、いっそのこと子テーマを作ってしまおうかと。

でも、たかだか文字サイズの為に・・・・。

そこで、その都度文字サイズを好みで変更できるように、

ボックス指定することにしました。

※ 因みに「SyntaxHighlighterの設定」で、
「追加のCSSのclass名(複数可能)」がありますが、こちらでは文字サイズ指定は出来ないようです。

 

結論として、

SyntaxHighlighterのショートコードを「div」で囲む。

こうです。

 

例01 文字サイズ指定なし

<div>例01 文字サイズ指定なし</div>

 

例02 文字サイズ指定「12ピクセル」

<div style="font-size: 12px;">例02 文字サイズ指定「12ピクセル」</div>

 

例03 文字サイズ指定「10ピクセル」

<div style="font-size: 10px;">例03 文字サイズ指定「10ピクセル」</div>

 

以上

TAGS: / / / | 2019年2月3日 |

ワードプレス(WordPress)5.0 新しくなったエディターの代替えに「Classic Editor」

Comment(0) | Trackback(0)

Categories | ブログ(WordPress)


ワードプレス(WordPress)5.0

新しくなったエディターは使い勝手悪し。

代替えには「Classic Editor」を。

 

1212 400x279 ワードプレス(WordPress)5.0 新しくなったエディターの代替えに「Classic Editor」

 

まぁ、システム的にも進歩したものだろうと、

気軽に5.0へとバージョンしてみました。

そしたら、新規投稿ページがガラっと変わってしまい、

しかも英語じゃないですか!

使い方がさっぱり分かりません。

こりゃ困った。

慣れるまでには時間掛かりそう・・・

そこで、

「こんにちは、新しいエディターです」

ってところを読んでみると、

以前のエディターなる「クラッシックエディター」プラグインがリリースされている。

 

1212 01 400x317 ワードプレス(WordPress)5.0 新しくなったエディターの代替えに「Classic Editor」

 

クラッシックエディターのサポートは2021年まで続くと書いてありますが、

その時になったらまた何かしら策を考えることにし、

さっそくインストールしてみました。

 

1212 02 400x169 ワードプレス(WordPress)5.0 新しくなったエディターの代替えに「Classic Editor」

ん・・・

やっぱ慣れ親しんだエディター「Classic Editor」プラグインのほうが〇です。

しまい

TAGS: / / / / | 2018年12月12日 |

ワードプレス(WordPress)の投稿 YouTube動画をレスポンシブ(スマホ対応)で掲載する方法

Comment(0) | Trackback(0)

Categories | ブログ(WordPress) YouTube スマホ


ワードプレス(WordPress)の投稿時に、

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

備忘録

 

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

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

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

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

 

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

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

極々最近の私です。ウフフ

 

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

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

 

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

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

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

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

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

設定にしてあります。

 

1106 400x356 ワードプレス(WordPress)の投稿 YouTube動画をレスポンシブ(スマホ対応)で掲載する方法

 

いじるファイルは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つのファイルもアップデートされちゃって、

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

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

 

しまい

TAGS: / / / | 2017年11月6日 |

« 古い記事