【WordPress】 jQueryでテキストを書き換える方法

前回の記事で「子テーマで書き換えられない翻訳ファイルはjQueryで直接書き換えればいいんじゃない?」的なことを書きましたが、これも実際にやってみました。

スポンサーリンク

まずjQueryとはなんぞや

20141108_JQuery_logo

jQueryとはJavaScriptのライブラリです。
JavaScriptはWebページにいろいろな動きをもたらすプログラム言語として知られていますが、これを簡単に扱えるようにしたものがjQueryです。
JavaScriptを知らずとも短いコードの追加でWebページに多彩な機能を追加できるわけです。

そんな便利なjQueryですが実はWordPress内でも使われています。
今回はコレを利用してテキストの書き換えを行ってみたいと思います。

jQueryの基本構文

まず構成についてです。
今回の課題のように出力された後で内容を書き換えるときにはこう書きます。

しかしこれは以下のように省略することが可能です。

jQueryを解説しているサイトではほぼごのカタチを用いています。

しかしWordPressで使うには一点注意が必要です。
Wordpressやプラグインでは他のJavaScriptライブラリも動いており、これらが$関数を使っていると衝突(コンフリクト)する可能性があります。
このためWordPressでjQueryを使う場合は「$」を「jQuery」に置き換えておきましょう。

その他コンフリクトを避ける方法はいくつもありますが、一律「$は全てjQueryに置き換える」と覚えたほうが理解しやすいのでここではそうしています。
コンフリクト対策は自分の好みに応じて選択してください。

さて基本構文を見て行きましょう。

セレクタとは場所、メソッドとは命令文、その引数は内容と考えるとわかりやすいです。

例えば

とすれば、hogeというIDで指定された要素のCSSをcolor:#ff0000;にするという処理になります。
すなわちhogeというIDが付いている箇所の文字は全て赤に変更されるということです。

このように場所と処理とその内容を指定するだけで簡単に変更が可能なのです。

実際にWordPressでやってみましょう

前回テーマの翻訳ファイルを変更することでテキストを書き換えましたが、今回もやることは同じです。
404ページの「おっと、失礼しました。」をjQueryで「このページは存在しません。」に変えてみましょう。

20141108_JQuery_01

・jQueryを読み込む

WordPressには最初からjQueryが含まれているので、アップロードしたり外から呼んだりする必要はありません。
functions.phpに以下のコードを追加することで使えるようになります。

これはinitというタイミングでjQueryを読み込むという処理です。

header.phpに書く方法もありますが、functions.phpに書いたほうが後々管理しやすいのでそうしています。
これも好みで変えてください。

・404ページに書き換えのコードを追加

次に404.phpに以下のコードを追加します。

追加する場所はヘッダーを読み込んだ後です。

20141108_JQuery_02

この箇所のタグ構造は以下のようになっていたため、セレクタ(場所)は「error404クラスの中のentry-headerクラスの中にある h1タグ」という指定です。

20141108_JQuery_04b

このようにセレクタをCSSと同じ形で指定できるのがjQueryの特徴です

メソッド「.text」はテキストを引数の内容に書き換える処理を行います。
すなわちh1タグの「おっと、失礼しました。」を「このページは存在しません。」に書き換えるということです。

これらを子テーマに上げてみると・・・

20141108_JQuery_05

テキストが変わりました。
完成です。

タグの構造を見てもテキストだけが書き換えられているのが分かります。

20141108_JQuery_03

ただし、表示されたページのソースを見ると元のテキストと書き換えのコードが分かってしまいます。

20141108_JQuery_07

ソースの見栄えまで完璧にこだわりたい場合はデメリットになるかも知れません。

おまけ:タグも一緒に変更する。

変更できるのはテキストだけではありません。
タグも一緒に変更することもできます。

ではh1タグをh2タグに変更してみましょう。

404.phpに追加するコードを以下のように変更します。

.htmlはテキストだけでなくhtmlごと変更するというメソッドです。

20141108_JQuery_08

20141108_JQuery_09b

できました。

覚えておくと便利かも

WordPressはテーマの翻訳ファイルを子テーマで変更することは簡単ですが、本体やプラグインの翻訳ファイルを子テーマ内で変更するのは困難です。
しかしこの方法なら表示させる内容を直接書き換えているため、基本全てのテキストを書き換えることが可能です。
WordPressを使いつつ、一字一句表現にこだわったサイトにしたいなら覚えておいて損はないでしょう。

他にも多種多様なメソッドがありますので興味がある方はぜひ調べてみてください。

最近作成したアンテナサイトではjQueryを使ってアコーデオンや特定文字のハイライトも行っています。
それらについても追々まとめたいと思います。


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

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA