ワードプレスの仕様変更に伴い、記事の中身をアップデートしました。
特定のブロックを”削除”すれば非表示にはできます。ですが一時的に非表示にしておきたい場合はどうすればいいんでしょう。
ここではスタイルで非表示にするやり方とコメントアウトを使った非表示のやり方の2パターンをご紹介します。
特定のブロックの表示/非表示機能がワードプレスに標準機能として搭載されました。
ただし使い勝手に関しては微妙なところもあるので、筆者はここでのやり方と併用してます。
スタイルで非表示
非表示にしたいブロックを選択します。（段落でも画像でもなんでもOK）
続いて右サイドのブロック詳細画面の【高度な設定】を開き、『追加CSSクラス』に「hidden-blocks」と入力します。
「hidden-blocks」というクラス名は適宜変更可能。ただしこのあとご紹介するスタイル設定内のクラス名も統一する必要あり。
追加用CSS設定欄に以下のコードをコピー＆ペーストします。
.hidden-blocks {
display:none;
}ワードプレスのテーマによっては追加用CSSの設定欄が異なります。
おそらく通常なら管理画面サイドメニューの【外観】→【カスタマイズ】項目内に【追加CSS】があると思うのでそこに記述します。なおここに記述したスタイルはすべてのページで適用となります。
テーマ《SWELL》であれば、
1.全ぺージ適用にしたいのなら前述の【追加CSS】に記載、もしくは子テーマを利用しているなら子テーマ内の【style.css】に記載します。
2.そのページだけの適用でいいなら、編集画面下部の【カスタムCSS＆JS】内に記載します。
なおこのやり方だと、一時的に画面から消すことはできますが、ソースには残ります。
もしもソースにも残したくないという場合は、次の”コメントアウトを使ったやり方”を参考にしてみてください。
コメントアウトで非表示
コメントアウトというのは、プログラムのソースコードやウェブサイトのHTMLタグなどを編集する際、特定の箇所をコメント化することで一時的に除外・非表示・無効化できる機能のことです。
ウェブサイトの例で言えば、旧テキストエディター時代は特定の箇所を<!--と-->ではさんでやることで、その間に書かれた内容がブラウザ上でいっさい非表示になります。
これをブロックエディターでも応用しようというものです。
| 使い勝手 | 設置レベル |
|---|---|
| そこそこ便利 | オリジナルファィルやコードをいじるので 作業工程・難 |
こちらは最初の設定が若干面倒ですが、一度設定してしまえばあとはそれほど難しくはありません。
これ以降の内容に関してはご利用の環境や使い方次第で「サイトが正常に表示されなくなった」などの障害が生じる可能性もありますため、ご利用に際しては自己責任にてお願い申し上げます。
またトラブルが生じても元の状態に戻せるようテーマのオリジナルファイルをカスタマイズする際は事前にバックアップ（コピー等）しておくことをおススメします。
特にfunctions.phpの編集は一文字でも間違えるとサイトが表示されなくなり、ワードプレスの管理画面も正常に表示されなくなります。
その場合はサーバー上のfunctions.phpをトラブル前の状態に戻すことでサイトも管理画面も正常に表示されるようになります。
なおテーマ内包のオリジナルファイルに加えた変更（カスタマイズデータ）はテーマのアップデートで元に戻ってしまいますため、カスタマイズ内容も併せてコピーするなどしておくといいでしょう。
（子テーマであればその心配はありません）
function comment_shortcode( $atts, $content = null ) {
return null;
}
add_shortcode('comment', 'comment_shortcode');
[comment]
ショートコード名は前述のコード・4行目の「comment」と一致させる必要があります。
別の名称にしたい場合はコード内及びショートコード同時に同じ名称に変更します。
[/comment]
これでソース上にも表示されない非表示ブロックが完成します。
パターンに登録で簡単運用
上の例だと、カスタムHTMLブロックを挿入してさらにショートコードを書きこむ（or 貼り付ける）というまあまあ面倒な作業が毎回生じてきます。
これがワードプレステーマ《SWELL》であればパターンからの1発入力で済むように加工できます。
やり方
functions.phpに先ほどのコードを入力するまでは一緒です。
管理画面の【外観】→【テーマファイルエディター】から「functions.php」は開けます。
入力後は以下の手順で進みます。
ブログパーツ→新規作成
囲み始め用のブロックパターンを新規作成します。
「タイトル」には任意のテキスト。（※検索用）
【下のサンプルでは「コメントアウト（START）」にしてます】
ブロックは［ショートコード］ブロックを選択後、囲み始め用の[comment]を記述。『用途』で「ブロックパターン」にチェックを入れて”公開”します。
ブログパーツ→新規作成
もう1個、囲み終わり用のブロックパターンも追加作成します。
「タイトル」には任意のテキスト。
【サンプルでは「コメントアウト（END）」にしてます】
ブロックは［ショートコード］ブロックを選択後、囲み終わり用の[/comment]と記述。『用途』で「ブロックパターン」にチェックを入れて”公開”します。
これでコメントアウト用のショートコードが2個ブロックパターンに登録されました。
操作方法
ここからは実際の操作手順です。
非表示にしたいブロックの直前でプラスマーク（※ブロックを追加）を表示→クリック→すべて表示をクリック。
パターンをクリック→「［SWELL］カスタムパターン」→「コメントアウト（START）」をクリックします。
これで[comment]と表示されたショートコードブロックが瞬時に挿入されます。
続いて非表示にしたいブロックの直後で、先ほど同様ブロックパターンから「コメントアウト（END）」をクリックします。
こちらは[/comment]と表示されたショートコードブロックが瞬時に挿入されます。
これでソース上にも表示されない非表示ブロックにできます。
プラス（＋）マークを出しずらい時はショートカットキーを使うとラクです。
ブロックの直前にブロック挿入→ctrl＋Alt＋T
ブロックの直後にブロック挿入→ctrl＋Alt＋Y
【ワードプレス ver.7.0.2で動作検証済】
コメント