広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【Hide Block】特定のブロックを隠して非表示にするプラグイン

WordPress

「Hide Block」WordPressプラグインのアイコン画像

この記事では、WordPressのブロックエディターで、特定のブロック(本文、見出し、画像、表、吹き出しなど)を、見えないよう隠して非表示にできるWordPressプラグイン「Hide Block(ハイド・ブロック)」について書きます。

【Hide Block】特定のブロックを隠して非表示にするプラグイン

本記事で紹介するWordPressプラグインを導入すると、それぞれのブロックを選択した時のツールバーに、新しく目玉()アイコンが追加されます。クリックすると、そのブロックが編集画面上で半透明になります。

実際に読者が見た時(プレビュー画面や実際の記事ページ)、何も表示されなくなります。そこに文章なんてなかったかのようになります。

使い方は人それぞれだと思いますが、僕の場合、これから書く予定だけど、まだ公開できていない記事を、既存記事にリンクする際に活用しています。

WordPressのブロックエディターで、一時的に隠したい見出し画像

僕は、1つ記事を書いたら、その記事に関連する記事が、頭に浮かぶ時があります。関連記事なので、既存記事に内部リンクするんですが、まだ書いていない記事なので、リンクは貼ることができません。もう書くことは決まっているので、あらかじめ既存記事に見出しや、軽い文章は書いておきたい時があります。

そういった場合、既存記事に「関連記事も書いています~。詳しくは、下記記事を参考にしてね~」といった感じで、見出しと文章を先に書いて、本記事で紹介する「Hide Block」プラグインで非表示にしています。実際に関連記事を書いて公開した後は、非表示設定を解除します。

人によっては、まだ始まっていないキャンペーン情報を、既存の記事に書きたい場合などに役立つかもしれません。キャンペーン自体は明後日から始まるんだけど、もう事前にささっと枠組みの文章や見出しだけでも書いておきたいという場合に使えそうです。

本プラグインはブロックエディターを利用している方向けです。クラシックエディターなどで使えるのかは知りません。

リリース元:Benjamin Zekavica(GitHubはこちら
記事執筆時のバージョン:1.4.0(2023年06月19日)
記事執筆時の筆者のWordPressバージョン:6.3

インストール方法

WordPressのプラグインストアからインストールできます。

WordPressの管理画面にログインして、左側サイドバーの「プラグイン」→「新規追加」をクリックします。

「Hide Block」WordPressプラグインをインストールする手順画像1

右上の検索ボックスに「Hide Block」と入力して検索します。出てきたプラグインの「今すぐインストール」をクリックします。

僕の場合、「Hide Block」と検索しても、今回利用するプラグインは、結構下のほうにありました。一番上のほうは、別のプラグインだったので、間違えてインストールしないよう注意です。作者名とアイコンをよく確認しましょう。作者様は「Benjamin Zekavica」です。

「Hide Block」WordPressプラグインをインストールする手順画像2

インストールできたら、「有効化」をクリックします。

「Hide Block」WordPressプラグインをインストールする手順画像3

特に設定などは不要です。インストールして有効化したら、すぐに利用できます。設定画面もありません。シンプルです。

使い方

非表示にしたいブロックがある記事の編集画面を開きます。投稿→任意の記事をクリックします。既にプラグイン導入前から記事を開いていた場合は、一度ページを再読み込みする必要があります。

「Hide Block」WordPressプラグインを使って、ブロックを非表示にする手順画像1

非表示にしたいブロックを、マウスで左クリックして選択します。試しに、見出し(h2タグ)を非表示にしてみます。選択すると、ツールバーが表示されて、その中にプラグイン導入前はなかった「目玉(目玉アイコン画像)」アイコンがあると思います。クリックします。

「Hide Block」WordPressプラグインを使って、ブロックを非表示にする手順画像2
トップツールバーにしていない場合

僕は上部に、固定でツールバーを表示するのが好きなので、「トップツールバー」を有効にしていますが、そうでない場合でも、問題なく使えます。

選択すると、付近にポップアップでツールバーが表示されます。この中に目玉アイコンがあると思います。

「Hide Block」WordPressプラグインをポップアップツールバーから有効にする手順画像

クリックしたブロック全体が半透明になります。他のブロックより薄くなります。これで実際の記事画面では見えなくなります。

「Hide Block」WordPressプラグインを使って、ブロックを非表示にする手順画像3
ブロックサイドバーの「高度な設定」からもオンオフできる

ツールバーからではなく、右側のサイドバーからもアクセスできます。ブロックを選択して、右側サイドバーを「ブロック」タブに切り替えます。

スクロールして、下のほうにある「高度な設定」をクリックして、中身を展開します。「Hide Block」のオンオフトグルがあります。

「Hide Block」WordPressプラグインを「高度な設定」サイドバーからオンオフする手順画像

実際の見え方を確かめたい場合、WordPress標準のプレビュー機能を活用します。下書き記事の場合、右上の「公開」横にあるPCアイコンをクリックします。「新しいタブでプレビュー」をクリックします。

「Hide Block」WordPressプラグインを使って、ブロックを非表示にする手順画像4

実際に見た時と同じ状態で、記事が表示されます。編集画面で書いていた見出し(h2)がなくなっています。

「Hide Block」WordPressプラグインを使って、ブロックを非表示にする手順画像5

見出しだけでなく、本文(pタグ)にも使えます。

「Hide Block」WordPressプラグインを本文(pタグ)に使ってみた画像

最初はコメントアウトになっていて、実はページのソース(開発者ツール)を見たら、案外簡単にバレるのかなぁと、初心者なりに思っていました。

しかし、開発者ツールを見てみると、そもそもそこに文章なんてなかったかのようになっていました。コメントアウトされた形跡も、書いていた文章すらもない状態です。編集画面からだけ確認できます。

「Hide Block」WordPressプラグインで非表示にした記事で開発者ツールを起動している画像

僕が試したところ、本文、見出し、画像、トピック、表、ブログカードで非表示にできました。これだけしか試していないので分かりませんが、恐らく、ブロックとして選択できるものであれば、どれでも非表示にできるんじゃないかと思います。

「Hide Block」WordPressプラグインをトピック、表、ブログカードに使ってみた画像

複数選択できるブロックであれば、一括非表示もできました。本文(p)をマウスでざざーっと選択して、そのままワンクリックで隠せます。

「Hide Block」WordPressプラグインで複数のブロックを一括で非表示にする手順画像

既に公開している記事の場合

下書き記事だと、保存すれば反映されますが、既に公開しちゃっている記事の場合、ただ編集画面で隠すようにしても反映されません。記事を更新することで、実際に反映されます。

「Hide Block」WordPressプラグインを使って、公開された記事の文章を非表示にする手順画像1

公開された記事ページを見ると、非表示になっています。

「Hide Block」WordPressプラグインを使って、公開された記事の文章を非表示にする手順画像2

非表示を解除する方法

記事編集画面を開きます。隠すように設定したブロックを選択して、ツールバーの「斜線入り目玉(画像)」アイコンをクリックします。元々目玉アイコンがあった場所にあると思います。

「Hide Block」WordPressプラグインで非表示にしたブロックを解除する手順画像1

公開している記事の場合は、記事更新します。隠していたブロックが、通常どおり表示されるようになります。

「Hide Block」WordPressプラグインで非表示にしたブロックを解除する手順画像2

プラグインを使わなくなったら、アンインストールしましょう。

感想

以上、WordPressのブロックエディターで、特定のブロック(本文、見出し、画像、表、吹き出しなど)を、見えないよう隠して非表示にできるWordPressプラグイン「Hide Block(ハイド・ブロック)」についてでした。

難しい知識なく、初心者でもワンクリックで表示・非表示を切り替えられるので便利だと思います。本プラグインを知る前は、わざわざ「HTMLとして編集」にして、コメントアウト記号(/**/)を付けたり、どこかメモ帳に移動したりしていました。

WordPress

Posted by ナポリタン寿司