ワードプレスでボタンのマウスオーバーでテキスト切り替え

Question

###前提・実現したいこと
ワードプレスでボタンのテキストをマウスオーバーで違うテキストに変えて表示できるようにしたいです。

###該当のソースコード
https://incloop.com/%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%97%E3%81%9F%E6%99%82%E3%81%AB%E6%96%87%E5%AD%97%E3%82%92%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88%E3%82%8B/
上記リンクを参考に
<a class="button" href="#"><span>ボタン</span><span>Button</span></a>と入力し
スタイルシートに
.button span {
display: inline-block;
position: absolute;
width: 200px;
height: 60px;
border: 2px solid #333;
text-align: center;
line-height: 60px;
}
.button span:nth-child(1) {
background-color: #fff;
color: #333;

}
.button span:nth-child(2) {
background-color: #333;
color: #fff;

}
.button:hover span:nth-child(2) {
display: none;
}
と記述をしても
<a class="button" href="#">ボタンButton</a>
と書き換えられてしまいます。

ネットで調べてもマウスオーバーで文字切り替えについて書いてあるページが発見できずに困っております。
お分かりになる方がいらっしゃいましたら教えてくださると幸いです。

宜しくお願い致します。

Answer 1

テキストで入力してビジュアルに切り替えると、コードを勝手に書き換えるWordPressの余計なお世話仕様のせいでそうなってしまいます。
PS Disable Auto Formattingというプラグインもありましたが、メンテナンスされておらず現行のWordPressでは動かないようです。

ちょっと無理矢理で不便かもしれないですが、ショートコード化して呼び出すようにするのが簡単ではないでしょうか。
テーマのfunctions.phpに追記してエディタで[button]で呼び出せば置換されずに表示可能です。

function button() {
	return '<a class="button" href="#"><span>ボタン</span><span>Button</span></a>';
}
add_shortcode( 'button', 'button' );

異なるボタンが複数必要な場合はbuttonの部分を違う文字に変えればいくらでも増やせます。

function button1() {
	return '<a class="button1" href="#"><span>ぼたん</span><span>Button</span></a>';
}
add_shortcode( 'button1', 'button1' );

Comments

[sato.tanaka]

お二方ご返答ありがとうございました。

ay03様
ファンクションに記載しましたら無事にできました！
ご丁寧にコードや、応用も教えてくださりとても感謝しております。
いくら調べても解決できず途方にくれていたのでとても助かりました！
ありがとうございました！

Answer 2

テスト環境で試して見ましたがちゃんと動作しているみたいです

必要箇所はあっているのでスタイルシートの読み込みに失敗していたり、他のタグの記述が間違っていないか確認してみてください

Comments

[退会済みユーザー]

ではなくて、テキストで入力してビジュアルにすると書き換えられるという意味だと思いますよ。