ワードプレス

JINボックスをカスタマイズ!「ここにテキストを入力」を削除/表示しない方法

jin ボックス カスタマイズ

ワードプレスで大人気のテーマ「JIN」。
使いやすくて魅力的なボックスが満載なので、本ブログでも多様しています。

しかし、ボックスを使っている中でどうしても気になったのが、
コードを記事入力にコピペするときに毎回、

「ここにテキストを入力」
「ここに本文を入力」

などと表示されること。
jin ボックス カスタマイズ

JINを使い始めたばかりの頃は分かりやすくてよかったのですが、
慣れてくると「ここにテキストを入力」を毎回削除して書き直す手間が地味につらくなります。

ねこさん
ねこさん
ここに入力するのはわかってるっちゅーねん

本記事では、ボックスをコピペする際に、
「ここにテキストを入力」を表示しない
あるいは文字数を減らすカスタマイズの方法をご紹介します。

スポンサーリンク

JINボックスをカスタマイズ!「ここにテキストを入力」を削除/表示しない方法

カスタマイズ後はこうなります

冒頭の説明では分かりづらかったかもしれませんので、
まず始めに本記事でやりたいことを画像で共有します。

元々JINのボックスを使うときは、
記事投稿の際にテキストの下にある「ボックスデザイン一覧」から使いたいボックスを選び、
「コードコピー」をクリックして記事入力欄に貼り付けます。

jin ボックス カスタマイズ

例えば
太枠線ボックス(simple-box1)のコードをコピーすると、
jin ボックス カスタマイズ
といったコードがコピペされるし、

タイトル付きボックス(kaisetsu-box1)のコードをコピーすると、
jin ボックス カスタマイズ
といったコードがコピペされます。

今回カスタマイズしたいのは、コードにある

「ここにテキストを入力」
「ここにタイトルを入力」
「ここに本文を入力」

といった文字(上図の黄色マーカー部分)。

冒頭でも書きましたが、これらの文字を毎回削除して書き直すのは非常に手間です。

そこで、カスタマイズ後は「コードコピー」をクリックしてコピーしたコードが
jin ボックス カスタマイズ
といったように、
「ここに本文を入力」といった文字が現れないようにカスタマイズします。

ねこさん
ねこさん
任意の文字に変えられるので、私は一文字の「*」や「文」に変更しました。

「ここにテキストを入力」を削除/表示しない方法

さっそくカスタマイズしていきます。

事前にバックアップを取っておいてください。
親テーマをいじるのでご利用の際は自己責任でお願いします。

今回、親テーマを直接いじりました。
スマートな方法ではないですが、子テーマを新規に作る時間が取れなかったのでやむなしです。

ねこさん
ねこさん
JINのアップデート時に本記事の内容をやり直しになるかもね…

親テーマのエディタを開く

WordPress管理画面より、「外観」 → 「テーマエディター」をクリックします。

ねこさん
ねこさん
テーマの編集となっている場合もあります。
jin ボックス カスタマイズ

今回は親テーマを編集するので、
子テーマを導入済みの場合は
右上にある編集するテーマを選択を「JIN」に変更します。
jin ボックス カスタマイズ

custom-field.phpを開く

テーマファイルの中にある、
「include」 → 「custom-field.php」をクリックします。

ねこさん
ねこさん
custom-field.phpがない場合は、includeの右の▼をクリックすると現れます。
jin ボックス カスタマイズ

custom-field.phpの該当箇所を探す

以下ではsimple-box1の「ここにテキストを入力」を編集する場合を例にご紹介します。

custom-field.phpを開くとコードがたくさん書かれているので、下の方にスクロールし、

  • <div class=“simple-box1”><p>ここにテキストを入力</p>

というコードを探します。

スポンサーリンク
ねこさん
ねこさん
私の場合は462行目以降にありました。
みけねこさん
みけねこさん
Ctrl+Fで検索すると早いです。
  • <div class=“simple-box1”><p>ここにテキストを入力</p>

という箇所はcustom-field.phpの中に2か所あります。

jin ボックス カスタマイズ

修正するのは直前に

  • <textarea readonly id=“textarea1”>

と記載がある方です。
jin ボックス カスタマイズ

ちなみに

  • <td></td>

で囲まれている方は、
投稿画面のボックスデザイン一覧のための文字となっています。

jin ボックス カスタマイズ
ねこさん
ねこさん
変更するとボックスデザイン一覧の表示が変わります。
jin ボックス カスタマイズ

「ここにテキストを入力」を任意の文字に修正/削除

直前に

  • <textarea readonly id=“textarea1”>

と記載がある方の

  • <div class=“simple-box1”><p>ここにテキストを入力</p>

の文字を修正します。

ねこさん
ねこさん
文字はあなたが分かりやすい文であればなんでもOKです。
私は一文字の「*」や「文」に変更しました。
みけねこさん
みけねこさん
消しやすいのと、どこに書けばよいかを両立したんだね
ねこさん
ねこさん
消すのが面倒であれば、「ここにテキストを入力」をすべて削除しても大丈夫です。
jin ボックス カスタマイズ
ねこさん
ねこさん
上の画像はsimple-box2、simple-box3も同様に変更しています。

保存して完了

最後に、画面下にある「ファイルを更新」を押せば完了です。

記事作成画面で確認

カスタマイズができたか、記事作成画面で確認してみましょう。

いつも通りボックスデザイン一覧から使いたいボックスを選び、
「コードコピー」をクリックします。

jin ボックス カスタマイズ

コピペすると
jin ボックス カスタマイズ
といったように、「ここにテキストを入力」という文字がなくなりました。

ねこさん
ねこさん
うまくいったね!

変更が反映されていない場合

変更が反映されていない場合は、キャッシュが残っている可能性があります。

Google Chromeを使っている場合は、
Shift+F5」(スーパーリロード)を試してみてください。

ねこさん
ねこさん
キャッシュを削除して再更新してくれる機能です。

その他のボックスも同様に変更可能

上の例ではsimple-box1を変更しましたが、
他のボックスも同様に変更できます。

同じ「custom-field.php」の中にある変更したいボックスの文字を変更しましょう。

まとめ

使いやすい機能満載のJIN。
ボックスをコピペすると毎回現れる「ここにテキストを入力」を削除する方法をご紹介しました。

ブログを書いていればボックスのコピペは何十回、何百回も行うので、
塵ツモで時間の節約になりますね。

スポンサーリンク
動画配信サービスのおすすめ「U-NEXT」!

最近パソコンの息抜きに動画配信サービスを見るのにハマっています。

何社か無料トライアルを試した中でのおススメは「U-NEXT」。

U-NEXTは最新作の作品も多数あります。
映画だけでなくコミックや本の配信が多いのも嬉しいところ。

600円分のポイントもつく31日間無料トライアルを実施中です。
アナと雪の女王2などは有料配信ですが、600円分のポイントを使って見れるお得感も。

【31日間無料トライアル中】
U-NEXT