DW Question Answer バージョンアップ（1.4.3.4→1.5.7）

WordPress（ワードプレス）プラグイン

前回のバージョンアップからかれこれ3年程放置していました。

理由としては、

バグらしきを発見し、暫くは安定していた旧バージョン（1.4.3.4）を利用して

様子をみてたと言ったところ。

そろそろ良かれとバージョンアップしてみました。

現状スペック等詳細

WordPress 5.3.1–ja　/　php7.3　/　自作テーマ

安定バージョン1.4.3.4が必要な方は、下記リンク記事からダウンロードして下さい。

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

※バージョンアップする際、旧バージョンをバックアップしておくこと必須。

※バージョンアップ後、異常があった場合の対処法

FFTPでサーバーにアクセスし、プラグイン「DW Question Answer」を丸ごと削除し、

バックアップした旧バージョンをアップロードしてくださ。

アップロード際、パーミッション（属性）は気にしなくて大丈夫です。

当方運営の「KAWASAKI Motorcycle Q & A」でバージョンアップ後、

不具合・エラー等は見られないようでした。ﾎｯﾄｼﾀ

過去に苦い思いしてるんで。

それでは、バージョン1.5.7はどう進化したのか？

さらっとレビューします。

言語ファイル（languagesフォルダ内）

画像左が旧バージョン1.4.3.4　右が新バージョン1.5.7

新たに追加されたファイルはありませんが、

新バージョンファイルは全体的に縮小気味。

ファイル名も変更されている。

dwqa → dw-question-answer

よって、新しく日本語化ファイルを作成する必要ありました。

【DW Question Answer1.5.7　日本語化ファイル】

下記記事からダウンロードして下さい。

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

DWQA設定に新たに追加された3項目

1.投票設定　匿名投票を許可する。

2.Akismet設定　スパム対策用プラグインとの紐付け。

3.自動閉鎖設定　自動閉鎖を使用する。

これらの項目は、まだ必要性がなさそうなのでそのままにし、

おいおい導入していこうと思います。

以上、さらっとレビューでした。

ココから先は、旧バージョンを色々カスタマイズといいますか、

スタイルシート等いじったものがデフォルトさてしまったので修正しました。

これらをカスタマイズされていない方は、下記はすっ飛ばしてください。

質問する「Ask Question」ボタンをカスタマイズ 参照

修正ファイルは「style.css」の596行目
・・・/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

アイコン「icon-q.png」を追加
・・・/wp-content/plugins/dw-question-answer/templates/assets/img/icon-q.png

パンくずリストのカスタマイズ（トップページ） 参照

修正ファイルは「style.css」の505行～521行
・・・/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

※レスポンシブ対応

パンくずリストのカスタマイズ（トップページ以外のページ） 参照

修正ファイルは「style.css」の433行～435行
・・・/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

※レスポンシブ対応

ベストアンサーのカスタマイズ 参照

修正ファイルは「style.css」の182行～203行
・・・/wp-content/plugins/dw-question-answer/templates/assets/css/style.css

画像を3つ追加
・・・/wp-content/plugins/dw-question-answer/templates/assets/img/

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

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

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

Google reCAPTCHA 実装法 参照

修正ファイル

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

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

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

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

※コメント欄にも「reCAPTCHA」を実装したかったが、どこのファイルをいじって良いか分からず断念し、DWQA設定のパーミッション（権限）で匿名のコメントを不可に設定した。

以上

ワードプレス プラグイン「DW Question & Answer」を利用すれば、

ヤフー知恵袋みたいなＱ＆Ａサイトが独自に作れます。

構築次第ではかなり類似させることもできます。

実際、当サイトにもこんな感じに実装しています。

KAWASAKI Motorcycle Q & A

ただし、相応のスキルが必要。

この記事はカスタマイズのアラカルトです。

参考まで。

実装（設定）方法

「DW Question & Answer」の設定方法　ワードプレス Q＆Aプラグイン

日本語化　フリー（ダウンロードファイルあり）

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

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

DW Question Answer ＋ BuddyPress｜ワードプレスをカスタマイズ

質問を自動的にホームページ（html）に貼り付けする方法

WordPress（ワードプレス）の投稿記事をホームページ（html）に自動貼り付け

バージョンアップする前に必ずやっておくこと

DW Question Answer　バージョン1.4.5　に更新してみた

安定したバージョン（1.4.3.4）のダウンロード

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

質問する「Ask Question」ボタンをカスタマイズ

DW Question Answer　レイアウトをカスタマイズ　「質問する」ボタン偏

パンくずリストのカスタマイズ　その1　（トップページ）

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

パンくずリストのカスタマイズ　その2　（トップページ以外のページ）

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

ベストアンサーのカスタマイズ

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

スパム投稿の対策方法

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

「Google Captcha (reCAPTCHA) by BestWebSoft」実装法

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

DW Question & Answer のバグ・脆弱性

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

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

WordPressプラグイン

バージョン1.4

３年程前に、バイク系Ｑ＆Ａサイトを自サイトに作成しました。

ベースのワードプレス（WordPress）上に、

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

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

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

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

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

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

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

対策しようがない。

見て見ぬふり。

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

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

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

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

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

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

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

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

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

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

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

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

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

対策として、

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

実装法を参照。

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

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

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

BuddyPress（ワードプレス プラグイン）の子テーマは必須。

作成方法を紹介します。

プラグイン「BuddyPress」は、当サイト内（KAWASAKI Motorcycle Q & A）にて、

「DW Question Answer」のアイテムとして利用しています。

そして、独自にプラグインBuddyPressの「style.css」をいじり、

レイアウト等変更しています。

ところが、BuddyPressは不定期にバージョンアップされます。

その際、独自に変更した内容に上書きされ、

手を加えた全てのデータが消えてしまいます。

結構ショックなことです。私がそうだったように。

◆ プラグイン（テーマ）の子テーマを作る概要

独自にカスタマイズしたプラグインに、アップデート（上書き）されることを回避するための措置。

独自にカスタマイズしたテーマ（プラグイン）を「子テーマ」とし、

親テーマがバージョンアップされても、子テーマの情報を親テーマに継承する構築法。

BuddyPress管理サイドのコメント

bpデフォルトの子テーマを作成することは、BuddyPressテーマを作成するための最も簡単で将来に適した方法です。 bp-defaultテーマの機能を利用する以外に、自分のニーズに合わせて調整することができます。 bp-defaultテーマを拡張することで、コアbp-defaultテーマファイルを維持しながら、JS、AJAX、および必要に応じてCSSのすべてのテンプレートを継承します。 BuddyPressの新しいバージョンが更新されたデフォルトテーマでリリースされると、あなたのテーマはそれと一緒に自動的に更新されます！ （1）子テーマにコピーして調整するか、（2）子テーマディレクトリに新しい「同名」のテンプレートファイルを作成するだけで、親テーマテンプレートを上書きできます。 独自のCSS、JS、AJAX機能を追加することもできます。

参考まで

Building a Child Theme of the BP Default Theme

それではBuddyPress子テーマ作成の説明に入ります。

1. デフォルトテーマ「bp-default」フォルダをまるごとコピー＆ペースト

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

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

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

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

そしてここにペースト ↓

wp-content/themes/bp-default

※ 属性（パーミッション）は「755」。

ワードプレス本体で認識されているか、確認してみる。

ダッシュボード ＞ 外観 ＞ テーマ

↓

2. 子テーマフォルダ「BuddyPress-child」」を作成してアップロード

デスクトップに新しいフォルダを作り、フォルダ名を「BuddyPress-child」に変更。

　↓　ここにアップロード

wp-content/themes/BuddyPress-child

※ 属性（パーミッション）は「755」。

3. style.cssファイルを作成し、BuddyPress-child にアップロード

style.cssに下記記述。

/*
Theme Name: BuddyPress child
Theme URI: http://example.org/themes/BuddyPress-child
Description: プラグイン「BuddyPress」の子テーマ
Version: 1.0
Author: xx
Author URI: http://example.org/
Template: bp-default
Tags: buddypress, two-column, grey, dark
*/

　↓　style.cssはここにアップロード

wp-content/themes/BuddyPress-child/style.css

Theme URI/Author/Author URI: 任意のものに変更してください。

Template：bp-default
WordPressにBuddyPressのデフォルトテーマ（bp-default）を親テーマとして使い、そこからすべてのテンプレートを継承することを伝える。

 Tags：buddypress, two-column, grey, dark
BuddyPressと互換性のあるテーマを使用していることをBuddyPressに伝えます。

4. functions.phpファイルを作成し、BuddyPress-child にアップロード

functions.phpに下記記述。

<?php
if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) :
    function bp_dtheme_enqueue_styles() {}
endif;
?>

デフォルトテーマ（親テーマ）と子テーマを紐付けします。

「functions.php」に下記記述。ファイルが置かれている階層は

wp-content/themes/BuddyPress-child/functions.php

（注意）文字コード（エンコーディング）を必ず「UTF-8」にして保存すること。

これを怠るとまともに動きません。

正直なところ、今回の構築が上手くなされているかの検証していません。

何故なら、バージョンアップはまだしていないし、カスタマイズもね。

当サイトにてBuddyPressのバージョンアップした時、問題があれば追記したいと思います。

しまい

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

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

しまい

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

以上