jQueryを使って、プラグイン内で表示している文字を書き換える方法

この記事のURLとタイトルをコピーする

プラグインはとても便利なのですが、プラグインが表示しているページの一部が「プラグインが決めた文字」だった場合、その文字をプラグインの設定で書き換えられるようになっていない場合はそのまま使わざるを得ません。諦めてそのまま使うもしくはプラグインのソースをカスタマイズしてしまってということをする人もいるんですが、プラグインはいつアップデートがかかるかわからないのでその方法はおすすめできません。そんなときは、jQueryを使って書き換えをする方法があります。

書き換えたい文字がどのように表示されているのかを特定

近いうちにブログでご紹介しようと思うのですが、テストや診断などができるプラグインpsychological tests & quizzesを試していたときにその「文字を置き換えたい!」という状況になりました。

テストで全部回答して、結果を見る画面に表示される、

Resultsという部分を変えたかったのです。

ソースを見てみると、

wp-testing/src/Template/Test/Passer/get-results.php

という部分で表示しているようでした。この書き方はLanguageファイルか各言語に合わせた内容を表示するということになっていると思われますが、残念ながら日本語の言語ファイルはまだありません。

jQueryで表示されている文字を好きな文字に置き換える

とうことで、jQueryを使って表示されている文字を好きな文字に置き換えようと思います。

こんなコードを書いてみました

このように書きました。このコードを私の場合はCode Snippetsに書きましたが、子テーマのfunctions.phpに書いても同じように動くかと思います。

プラグインを使ったテストページは全体的に ホームページのurl+test というurlになっていましたので、その部分を取り出して、テストページかどうかを判定しました。取り出すために homeurl という部分にこのWebサイトのトップページのurlを定義しておいたり、dirという変数に取り出した4文字を入れました。

resultsというクラスのh2を text で指定した文字列で置き換えています。’テスト結果’を編集することで好きな文字にすることができます。

ということで再度表示すると、

このように、Resultsテスト結果とかわりました。

jQueryをWordPressで使うときにおすすめの方法 Code Snippets

jQueryをWordPressで使うときにおすすめはプラグインCode Snippetsを使う方法です。

子テーマにして、子テーマでjQuery記述部分を読み込ませて、という方法もあるのですが

今までいくつも子テーマを作ってサイトを作ったりしましたが、あるサイトのために全く新しくテーマを作りました。 WordPressだけでなく...

少し手間がかかることと、再利用するときに探したり必要な部分だけを取り出すのが面倒です。

その点

仕事でホームページを制作する際にphpでコードを書いてカスタマイズをすることが多いです。その場合、「子テーマのfunctions.php...

でご紹介したCode Snippetsであれば機能ごとに分けられ、機能ごとにエクスポート&インポートができるのでコードの再利用が可能になります。

今回は基本的にこのCode Snippetsを利用してカスタマイズする方法を書きましたが、コード自体はほかの方法で行う場合も同じようになります。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。