ワードプレス Embed（埋め込み）機能の表示方法をカスタマイズ

前回はEmbed（埋め込み）機能の表示不具合を検証してみました。

ですが不具合の対処方法をどうするか？ 半日ほど悩み結論が出ませんでした。

そもそも当ブログ（テーマ）は自作したもであり、

そこそこphp・css等をいじるスキルはあるんです。

不具合があれば始めからシステムをサクッといじれば良かった事。

と言うことで、「Embed機能」の表示方法を自力でカスタマイズします。

あくまでも私的なカスタマイズですから参考まで。

※現時点のワードプレスはバージョン5.8.1です。

前回の「Embed機能」検証で、２種類のブログカードが用意されている事が分かり、

アイキャッチ画像のサイズ（アスペクト比）違いで、標準タイプとスクエアタイプの２種類です。

スクエアタイプはサムネイル画像が大きいです。「Embed機能」検証記事は下のブログカード。

ワードプレス Embed（埋め込み）機能の不具合を検証【ブログカード】

上の画像はアイキャッチ画像が横長だったので、スクエアタイプのブログカードです。

当ブログでは、標準タイプだと何ら問題なく表示されるのですが、

このスクエアタイプがうまく表示されないので、

サムネイル画像のサイズを標準タイプと同じにしました。

手を加えるファイルとコードです。↓　ダウンロードして修正。

【public_html/wp-includes/theme-compat/embed-content.php】

Ｂｅｆｏｒｅ

<div class="wp-embed-featured-image rectangular">

Ａｆｔｅｒ

<div class="wp-embed-featured-image square">

Ｂｅｆｏｒｅ

↓　↓

Ａｆｔｅｒ

「rectangular」を「square」に書き換えるだけでサムネイルが小さくなる。

次にスタイルシートでマージンやフォントサイズを若干変更。

Embedのcss(スタイルシート)をダウンロードして修正。

格納場所： 【/wp-includes/css/wp-embed-template.min.css】

カスタマイズ後の表示はこうなました。

実際のブログカードです。

TOSHIBA dynabook T451/46DRK 壊れたノートパソコンの修理

最後に、変更したファイル

「wp-embed-template.min.css」「embed-content.php」を

自作テーマに移して子テーマにする。

テーマ内の「functions.php」に子テーマにしたことのコードを記述。

//embedの子テーマ
function my_embed_style() {
wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/wp-embed-template.min.css');
}
add_filter('embed_head', 'my_embed_style');

以上です。

ワードプレス Embed（埋め込み）機能の不具合を検証【ブログカード】

Embed（埋め込み）機能とは、ワードプレスの記事内にURLを貼り付けるだけで

サムネイル画像付きリンクが自動的に表示される機能。

このサムネイル画像付きリンクのことを「ブログカード」と言います。

下のブログカードはサンプル画像です。↓

Embed（埋め込み）機能は、ワードプレス本体に元々（バージョン4.4から）備わっている

機能で、プラグイン等を任意でインストールするものではありません。

投稿記事に「アイキャッチ画像」を設定しないと、サムネイル画像なしのブログカードが

表示される仕組みです。

便利な機能ですから当ブログでも頻繁に利用しています。

現時点（WPバージョン5.8）のワードプレスのEmbedには、

２タイプのブログカードが用意されています。

標準表示形式とスクエア表示形式です。

表示形式はサムネイル画像（アイキャッチ画像）のサイズで振り分けされます。

四角（rectangular）の画像であれば標準表示です。

長方形（square）の画像であればスクエア表示。

そのサイズはどう認識・設定されているかは検証していませんが、

最近よく使われる写真のサイズ（アスペクト比16：9）は、長方形（square）として認識され、

ブログカードはスクエア表示されます。

下の画像はスクエア形式のサンプルです。

しかし、当ブログ（自作）との相性なのか？バグなのか？

実際にはサムネイル画像しか表示されません。↓

タイトルや抜粋記事が切れて表示されません。

であれば、サムネイル画像（アイキャッチ画像）をアスペクト比4：3の写真に変更し、

標準表示のブログカードにしてみると、

下の枠線は表示されませんが、いちお問題なく表示されるようになりました。

当自作ブログにおいて、

Embed機能でブログカード表示の不具合を発症するのは・・・

サムネイル画像（アイキャッチ画像）のサイズによって、スクエアのブログカードになった時。

つまり不具合を解消するには、サムネイル画像を全て4：3に変更すればいいことになる。

流石にその作業は無理。　となると、システムをいじる？　やっぱ無理。

Embedに担うプラグインを導入してみようと調べた結果、「Pz-LinkCard」がよさそう。

しかし、Embed機能で設置したURLには反映されないため、新たに貼り直す必要がある。

困った・・・

しまい

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】プラグイン

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

設置した アドセンス「関連コンテンツ」をカスタマイズ

関連コンテンツ ユニットを当ブログに馴染むようにカスタマイズする。

これ系ユニットは、ワードプレス プラグイン「Yet Another Related Posts Plugin」を

もう実装中だから、YARPPを廃止にしてしまおうかとも思いましたが、

勿体ないから、ブログに馴染むよう一緒に設置することにしました。

備忘録

アドセンス 関連コンテンツを、貼り付けたファイル名。

（ワードプレス内テーマファイル）

※ 編集はブログのダッシュボード＞外観＞テーマの編集 にて。
phpを熟知してないとシステムが壊れることがあるので要注意。

・home.php （トップページ）

・single.php （投稿ページ）

・page.php （固定投稿ページ）

・category.php（カテゴリー）

・date.php （日付）

・search.php （検索結果）

カスタマイズ

ブログテーマ内 スタイルシート (style.css)に、下記コードを追記。

div.related{margin-top:70px;margin-bottom:50px;padding:15px 15px 30px;overflow:hidden;box-shadow:3px 3px 10px 2px rgba(0, 0, 0, 0.3);background-color:#FFFFFF;}
div.related h4{margin:20px 0;padding:5px 10px;font-size:0.875em;border-bottom:dotted 1px #096aa2;border-top:dotted 1px #096aa2;border-left:solid 8px #096aa2;background-color:#E3E7E4;}

各phpファイルに貼り付ける際、こうする。

<div class="related">
<h4>関連記事＆スポンサーリンク</h4>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-........."
     data-ad-slot="........"
	</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

問題なければこんな感じに表示される。

以上

追記　2022/03/23

「関連コンテンツ」ユニットは2022年3月より「Multiplex 広告」に名称変更され、

広告だけが表示される仕様に変更されました。

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」です。

しまい

DW Question Answer（ワードプレス・プラグイン）のレイアウト「パンくずリスト」を

カスタマイズ 其の２。

その1ではトップページのフィルターナビゲージョン的なパンくずリストをカスタマイズ

しましたが、今回は投稿ページのパンくずをカスタマイズ。

デフォルトだとこんな感じ・・・

当自作テーマだと、パンくずリストの文字サイズがでかすぎて、全体的な文字バランスが

悪いです。改良方法は、スタイルシートの変更だけで見栄え良くシンプルしていきます。

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

保存先階層は ・・・

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

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

どこをいじるかは「 /* Breadcrumbs */ 」で、css内を検索して探してください。

432行～435行

/* Breadcrumbs */
.dwqa-breadcrumbs {
 margin-bottom: 20px;
}

変更後

/* Breadcrumbs */
.dwqa-breadcrumbs {
 margin: 30px 0;
 font-size:12px;
 line-height:26px;
}

.dwqa-breadcrumbs .dwqa-current{ display:none}

.dwqa-breadcrumbs a {
 padding: 0em 1em 0em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);
 }

.dwqa-breadcrumbs a:hover{
 background: #33F6F8;
}

.dwqa-breadcrumbs a::after,
.dwqa-breadcrumbs a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em; 
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
}

.dwqa-breadcrumbs a::after{ 
 z-index: 2;
 border-left-color: #ddd; 
}

.dwqa-breadcrumbs a::before{
 border-left-color: #ccc; 
 right: -1.1em;
 z-index: 1; 
}

.dwqa-breadcrumbs a:hover::after{
 border-left-color: #33F6F8;
}

.dwqa-breadcrumbs .current,
.dwqa-breadcrumbs .current:hover{
 font-weight: bold;
 background: none;
}

.dwqa-breadcrumbs .current::after,
.dwqa-breadcrumbs .current::before{
 content: normal; 
}

結果的にスタイルの指定が多くなってしまいましたが、利用される方はコピペでね。

レスポンシブにも対応してます。

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

しまい

DW Question Answer（ワードプレス・プラグイン）のレイアウト「パンくずリスト」を

カスタマイズしました。パンくずリストとは、下画像のようにウェブページ内で自分が

今どのページにいるのかを示すリストです。

デフォルトは英語で、日本語化すると下画像のような表示になります。

ただ単語が羅列してるだけで、芸がないように思えます。また現在どの場所のページが

表示されているかさえ分かりづらい。

個々のテーマスタイルシートに依存（文字サイズなど）しているところもあるでしょうが、

私的にカスタマイズしてみました。

参考まで

バージョンは1.4.3.4　いじるファイルはstyle.css　保存先階層は ・・・

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

504行～521行

/* Question Filter */
.dwqa-question-filter {
	margin-bottom: 20px;
}

.dwqa-question-filter span,
.dwqa-question-filter a {
	margin-right: 10px;
}

.dwqa-question-filter a {
	border: none !important;
	text-decoration: none;
}

.dwqa-question-filter a.active {
	border-bottom: 1px solid #ddd !important;
}

変更後

/* Question Filter */
.dwqa-question-filter {
	border-bottom: 1px solid #C0C0C0;
	margin-bottom: 30px;
}

.dwqa-question-filter span{
	display:none
	}

.dwqa-question-filter a {
	border: 1px solid #C0C0C0 !important;
	border-bottom:0 !important;
	margin-left:10px;
	margin-bottom:-1px;
	text-decoration: none;
	font-size:13px;
	padding:2px 10px;
	background-color:#E3E7E4;
	word-break:break-all;
	word-wrap:break-word;
	display:inline-block
}

.dwqa-question-filter a.active {
	border-bottom: 0px !important;
	background-color:#FFFFFF;
}

いちおレスポンシブにも対応していると思いますが、

あくまでも当方が作った日本語化ファイルでのカスタマイズです。

枠からはみ出す場合、おのおの微調整するか、下記URLから日本語化ファイルを

ダウンロードして下さい。

DW Question Answer　日本語化｜ファイルダウンロード　【 WordPress プラグイン 】

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

投稿ページのパンくずリスト カスタマイズはその2もご覧下さい。

DW Question Answer　レイアウトをカスタマイズ　パンくずリスト偏　其の2

DW Question Answer（ワードプレス・プラグイン）のレイアウト「質問する」ボタンを

カスタマイズしました。バージョンが変わると、変更する場所（style.cssの行数）も変わると

思うので、いちお備忘録しておきます。

デフォルト（英語版）はこんな感じに表示されます。

日本語化にすると・・・

バージョンは1.4.3.4

いじるファイルはstyle.cssで、保存先階層は

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

596行目

.dwqa-questions-footer .dwqa-ask-question a {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #ddd;

変更後と追記（a:hover）

.dwqa-questions-footer .dwqa-ask-question a {
 display: inline-block;
 font-weight:bold;
 color:#666;
 padding: 5px 20px 5px 50px;
 margin:0 10px 10px 10px;
 border: 1px solid #ddd;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 background: url(../img/icon-q.png) no-repeat 14px 4px #D0E0E8;
}
.dwqa-questions-footer .dwqa-ask-question a:hover {
    color:#FF0000;
}

ボタンの中のアイコンは、フリー素材サイト「icooon-mono」よりダウンロードし、

サイズを22×22に変更ました。

画像のアップロード先

・・・/wp-content/plugins/dw-question-answer/templates/img/icon-q.png

以上

BuddyPress 「プロフィール写真を変更」のカスタマイズをしました。

と言うのも、既存の説明には「Gravatar」のリンクがあり、これっていらないよなぁ。

それと、「プロフィール写真を変更」ページでは、写真の切抜きができないので、

そのむねを加えた説明に変更しました。

（注意）
今回のカスタマイズは、プラグインがバージョンアップされると変更箇所も上書きされ、元に戻ってしまいます。子テーマを作成していも、デフォルトに戻ります。アップデートごとに変更が必要。

日本語化されたデフォルトは

プロフィール写真はプロフィール画面やサイト内で使用されます。アカウントのメールアドレスに関連付けられた Gravatar があればその写真が使われますが、パソコンから画像をアップロードすることもできます。

実際のPHPファイルにはこう記述されている

Your profile photo will be used on your profile and throughout the site. If there is a <a href=”http://gravatar.com”>Gravatar</a> associated with your account email we will use that, or you can upload an image from your computer.

いじるファイル(change-avatar.php)は、結構深い場所に置いてある。

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

24行目をいじる

変更前

<?php _e( 'Your profile photo will be used on your profile and throughout the site. If there is a <a href="http://gravatar.com">Gravatar</a> associated with your account email we will use that, or you can upload an image from your computer.', 'buddypress' ); ?>

変更後

<?php _e( 'プロフィール写真はプロフィール画面やサイト内で使用されます。デフォルトの画像サイズは「150px × 150px。デフォルトサイズ以外は、管理バー（ダッシュボード）の プロフィール ＞ あなたのプロフィール ＞ 拡張プロフィール にて写真の編集（切抜き）を行って下さい。' ); ?>

注意点

change-avatar.phpをエディターで開くと、保存時に文字コードがSHIFT-JISで

保存されてしまうので、UTF-8で保存する必要がある。

序に「カバー画像を変更」ページも修正しました。

保存先： /wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/members/single/profile/change-cover-image.php

このページは一部英語なので、日本語に修正し、カバー画像のサンプルをダウンロードできるようにカスタマイズ。

デフォルトはPHPファイル22行目

変更前

<?php _e
( 'Your Cover Image will be used to customize the header of your profile.', 'buddypress' ); ?>

変更後

<?php _e
( '表紙のイメージは、あなたのプロフィールのヘッダーをカスタマイズするために使用されます。サンプル画像をダウンロードすることもできます。→【 https://www.hcz.jp/download/dwqa/cover-image.zip （cover-image.zip）】' ); ?>

サンプル画像の保存場所は任意です。

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' );

しまい