ワードプレス

strongタグをbタグに一括置換プラグインSearch Regexとローカル環境で対応サクラエディタ【便利機能】

search-regex

記事を書いている時にここは太字にしたいなって時にBをクリックして太字にしていませんか。

btagu

<strong><b>についてブログ記事内で<strong><b>の多用するとGoogleからスパム判定される可能性があります。

<strong>もしくは<b><span class=”b”>に変更する事をおススメします。

すべての記事の<strong>タグを変更するのは大変なので「WordPressプラグイン」か「ローカル環境のエディタ」で一括置換する方法について解説します。

Search Regex(プラグイン)

記事内すべての記事を一括置換する場合は、wordpressプラグイン「Search Regex」を使用してまとめて変更できます。

プラグイン

「Wordpress管理画面」→「プラグイン」→「新規追加」→「Search Regex」入力→「今すぐインストール」→「有効化」

Search Regexプラグイン

有効化が終わったら「ツール」→「Search Regex」をクリック。

ツール

検索&置換

検索結果
  • 検索:<strong>
  • 置換:<span class=”b”>

検索の部分に<strong>と入力し「検索」をクリックすると、「固定ページ」「投稿」内にある<strong>タグを下記に表示されます。

検索結果に問題なかった場合は置換の部分に<span class=”b”>を入力して「すべて置換」をクリック。

「すべて置換」が完了してから、次は</strong></span>に置換します。

置換
  • 検索:</strong>
  • 置換:</span>

「すべて置換」で置換作業は完了です。

置換がうまくいかなかった時の対処法

「投稿一覧」→「投稿詳細」でブロックエディタ上で下記の表示されている事があります。

コンテンツ

この表示は「HTMLの閉じタグが二重になっている」「HTMLタグが閉じられていない」などの時に表示されます。

その場合は「・・・」→「解決」を選択。

解決

「解決」をクリックすると</span>が二重に入っている事が確認できたので「ブロックへ変換」をクリックしてエラーを解除します。

ブロック問題解決

置換がうまくいかなかった場合は手動になりますが、一記事一記事に「ブロックのリカバリーを試行」の表示がないか確認して修正していきましょう。

上記作業が完了したら、後はCSSを追加するのみです。

.b {
    font-weight: bold;
}
プル

WordPressプラグインで一括置換方法を解説しましたが、一気に変更してエラーが出てしまう可能性がある為、不安な方はローカル環境で置換作業を行いブロックエディタにペーストで貼り付ける方が安全です。

↓下記本はHTML&CSSとWebデザインが 1冊できちんと身につく本です。

HTML&CSSとWebデザインが 1冊できちんと身につく本
HTML&CSSとWebデザインが 1冊できちんと身につく本

▪HTML&CSSとWebデザインが 1冊できちんと身につく本
Web制作の基礎言語であるHTMLやCSSの書き方だけでなく、多くのWebサイトが採用している4つのレイアウト手法を学ぶことで、1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。学習用ではない「現場で役に立つ」実践的なテクニックを数多く盛り込まれています。

book
created by Rinker
¥2,508 (2022/10/05 00:18:26時点 楽天市場調べ-詳細)

サクラエディタ(エディタ)

ローカル環境で簡単に置換することが出来るエディタがありますので、投稿の内容を直接変更したくない方におススメです。

・サクラエディタ
https://sakura-editor.github.io/

サクラエディタ

インストール

「最新版ダウンロード」→「インストーラ、パッケージダウンロード」をクリック。

最新版

GitHubというサイトへ移動します。
上から三番目の「Installer」のzipファイルをクリックしてダウンロードします。

ファイル選択

エクスプローラーの「ダウンロード」→「ファイル」→「展開」でZipファイルを展開します。

zipファイル展開

解凍されたファイルをクリックし「OK」をクリック。

インストール

サクラエディタセットアップウィザードの開始→「次へ」をクリック。

セットアップ

情報→「次」をクリック。

セットアップ

コンポーネントの選択→「KeyWordファイル」をチェック→「次へ」をクリック。

コンポーネントの選択

追加タスクの選択→「項目チェック」→「次へ」をクリック。

追加タスク

インストール準備完了→「インストール」をクリック。

準備完了

サクラエディタセットアップウィザードの完了→「完了」をクリック。

完了

サクラエディタ(使い方)

サクラエディタ

置換方法の参考例として<strong><b>を入力しました。

太字

ショートカットキー「ctrl + r」で「置換」を開きます。

  • 置換前:<strong>
  • 置換後:<span class=”b”>

置換したいコードを入力して「すべて置換」をクリック。

一括置換

これで一括置換できました。

後は、同じ要領で置換していきます。

置換完了

このように、ローカルでも一括置換作業ができますが、実際プラグインで一括置換した方が効率がいいです。

サクラエディタはローカル環境で使用できるので、WordPressを使用しない方でも何かしらのデータを一括置換したい時にとても便利ですのでインストールしておくのもいいのかなと思います。

サクラエディタ(改行削除)

覚えとくと便利なサクラエディタで改行削除についても解説します。

人それぞれCSSの書き方が違ったりするので、共同でコードを共有しWeb制作をしている場合、相手の書き方に合わせる時に改行削除を一括でする方法です。

改行あり
改行あり
改行なし
改行なし

「ctrl + r」で置換を開き「\r\n」の入力と「正規表現」にチェックを入れて「すべて置換」をクリックで改行を削除できます。

置換方法
\r\n

「\r\n」→「正規表現にチェック」→「すべて置換」

置換完了後
すべて置換

VSCodeで一括置換

vscode一括置換
vscode一括置換

VSCodeはWeb制作で開発ツールとしてよく使われるエディタです。

vscodeにコードを張り付けてから、「ctrl + h」で検索&置換を出します。

置換ショートカット
検索&置換

(例)bodypに変換したい場合は検索にbody置換にpを入力して右にある【ac】と書いてあるボタンをクリックして一括できます。

一括置換クリック
一括置換クリック

▪もっと詳しく理解したい方は下記のVisual Studio Code専門書がお勧めです。

▪Visual Studio Code実践ガイド–最新コードエディタを使い倒すテクニック
基本と意外と知らない基本機能からカスタマイズまで。そして拡張機能開発までを扱うVisual Studio Code解説書の決定版です。

book
created by Rinker
¥3,058 (2022/10/04 07:04:41時点 楽天市場調べ-詳細)

VSCodeを効率よく使いこなすための設定や拡張機能の紹介とダウンロードからインストールまでのやり方に関しては下記記事で解説しています。

VSCodeアイキャッチ画像
Web制作にお勧めのエディタ|VSCodeの設定・拡張機能【コーダー必見】Web制作で開発ツールとしてよく使われるVSCode。自身が普段使用しているエディタで、HTML・CSS・JSを書くとき便利なので重宝しています。これから初めて使い始める人が、最初に入れておくことによってVSCodeを効率よく使いこなすための設定や拡張機能の紹介とダウンロードからインストールまでのやり方を紹介します。...
プル

操作方法を知っていれば作業効率が一気にアップします。このサイトで随時便利機能を紹介していきます。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA