ワードプレスで大人気のテーマ「JIN」。
使いやすくて魅力的なボックスが満載なので、本ブログでも多様しています。
しかし、ボックスを使っている中でどうしても気になったのが、
コードを記事入力にコピペするときに毎回、
「ここにテキストを入力」
「ここに本文を入力」
などと表示されること。
JINを使い始めたばかりの頃は分かりやすくてよかったのですが、
慣れてくると「ここにテキストを入力」を毎回削除して書き直す手間が地味につらくなります。
本記事では、ボックスをコピペする際に、
「ここにテキストを入力」を表示しない、
あるいは文字数を減らすカスタマイズの方法をご紹介します。
JINボックスをカスタマイズ!「ここにテキストを入力」を削除/表示しない方法
カスタマイズ後はこうなります
冒頭の説明では分かりづらかったかもしれませんので、
まず始めに本記事でやりたいことを画像で共有します。
元々JINのボックスを使うときは、
記事投稿の際にテキストの下にある「ボックスデザイン一覧」から使いたいボックスを選び、
「コードコピー」をクリックして記事入力欄に貼り付けます。
例えば
太枠線ボックス(simple-box1)のコードをコピーすると、
といったコードがコピペされるし、
といったコードがコピペされます。
今回カスタマイズしたいのは、コードにある
「ここにテキストを入力」
「ここにタイトルを入力」
「ここに本文を入力」
といった文字(上図の黄色マーカー部分)。
冒頭でも書きましたが、これらの文字を毎回削除して書き直すのは非常に手間です。
そこで、カスタマイズ後は「コードコピー」をクリックしてコピーしたコードが
といったように、
「ここに本文を入力」といった文字が現れないようにカスタマイズします。
「ここにテキストを入力」を削除/表示しない方法
さっそくカスタマイズしていきます。
バックアップを取っておいてください。
親テーマをいじるのでご利用の際は自己責任でお願いします。
今回、親テーマを直接いじりました。
スマートな方法ではないですが、子テーマを新規に作る時間が取れなかったのでやむなしです。
親テーマのエディタを開く
WordPress管理画面より、「外観」 → 「テーマエディター」をクリックします。
今回は親テーマを編集するので、
子テーマを導入済みの場合は
右上にある編集するテーマを選択を「JIN」に変更します。
custom-field.phpを開く
テーマファイルの中にある、
「include」 → 「custom-field.php」をクリックします。
custom-field.phpの該当箇所を探す
以下ではsimple-box1の「ここにテキストを入力」を編集する場合を例にご紹介します。
custom-field.phpを開くとコードがたくさん書かれているので、下の方にスクロールし、
- <div class=“simple-box1”><p>ここにテキストを入力</p>
というコードを探します。
- <div class=“simple-box1”><p>ここにテキストを入力</p>
という箇所はcustom-field.phpの中に2か所あります。
修正するのは直前に
- <textarea readonly id=“textarea1”>
と記載がある方です。
ちなみに
- <td></td>
で囲まれている方は、
投稿画面のボックスデザイン一覧のための文字となっています。
「ここにテキストを入力」を任意の文字に修正/削除
直前に
- <textarea readonly id=“textarea1”>
と記載がある方の
- <div class=“simple-box1”><p>ここにテキストを入力</p>
の文字を修正します。
私は一文字の「*」や「文」に変更しました。
保存して完了
最後に、画面下にある「ファイルを更新」を押せば完了です。
記事作成画面で確認
カスタマイズができたか、記事作成画面で確認してみましょう。
いつも通りボックスデザイン一覧から使いたいボックスを選び、
「コードコピー」をクリックします。
コピペすると
といったように、「ここにテキストを入力」という文字がなくなりました。
変更が反映されていない場合
変更が反映されていない場合は、キャッシュが残っている可能性があります。
Google Chromeを使っている場合は、
「Shift+F5」(スーパーリロード)を試してみてください。
その他のボックスも同様に変更可能
上の例ではsimple-box1を変更しましたが、
他のボックスも同様に変更できます。
同じ「custom-field.php」の中にある変更したいボックスの文字を変更しましょう。
まとめ
使いやすい機能満載のJIN。
ボックスをコピペすると毎回現れる「ここにテキストを入力」を削除する方法をご紹介しました。
ブログを書いていればボックスのコピペは何十回、何百回も行うので、
塵ツモで時間の節約になりますね。
最近パソコンやスマホを使い続けると目がしょぼしょぼしやすい…
集中してパソコンしていると目が疲れやすくなった…
というときにの原因の一つにアントシアニン不足が考えられます。
アントシアニンを手軽に補うならアサイベリーがおススメです。
アサイベリーにはアントシアニンが多い食材として有名なブルーベリーよりも4.6倍多くのアントシアニンが含まれています。
そのアサイベリーをふんだんに使ったサプリメントの「アサイベリーアイ」。
錠剤タイプのサプリメントなので、手軽にアントシアニンを摂取できます。
初回970円と他のアサイベリー系サプリよりも低価格。
しかも定期販売としては珍しく継続指定回数の制限がありません。
1回だけ試したい!など、気軽に試せるのは嬉しいです。