WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
An easy way to hide (not print) unfinished parts when editing past posts with Wordpress

WordPressで過去の投稿を編集する際、未完成の部分を非表示(出力しない)ようにする簡単な方法

公開日: 使い方など

WordPressで日記以外のサイトを作成している方が行うことが多い「過去の投稿や固定ページの編集」。特に大きな変更を行うとき皆さんどうしてますか??恐らく「気合を入れて一気に行う」というのが多くの回答でしょう。

でも時には中断して続きは明日・・・なんてこともありますよね?そんなときは??

恐らく大抵の方が「パソコンのメモ帳などどこかに保存して、更新は見送る」「エディタの自動保存機能(リビジョン)が働くのを待って、次回それを復元して行う」「途中でも更新ボタン押しちゃう」のいずれかでしょう。私の場合はなるべくゴミを増やさないようリビジョン機能を停止しているので

「気合を入れて一気に行う」→「途中でも更新ボタン押しちゃう」という流れですね(笑)。

みなさんはどうでしょう??

昔のビジュアルエディタやテキストエディタだったら「パソコンのメモ帳などどこかに保存して、更新は見送る」という一時保存の手段が使えましたが、ブロックエディタだと・・・ちょっと難しいですよねぇ。そうなるとやっぱり気合と根性!!からの更新ボタン・・・ですかね(笑)?

困ったときはプラグイン!!ということでいろいろ探した結果、面白いの見つけました

このプラグインの機能を一言でいうと、別の場所で編集しておいて、完成後ガバっと今の投稿へ上書きしちゃうというもの。恐らく唯一無二の画期的なプラグインだと思います。ちなみに私のようにリビジョン機能を停止した環境でも問題なく動きました。

でも・・・そんなに大掛かりなものでなくていいから、とにかく簡単に途中で中断できるようにならないか??という方法を今回は紹介します。お使いのWordpressテーマへ簡単なコードを追加することになりますが、特に難しいものでもありませんのでぜひチャレンジしてみてください。

編集の文章などを非表示(非出力)にする流れ

今回紹介する方法を実装するとショートコードで囲んだ部分は投稿編集画面でのみ見ることができ、ページ表示時には何も表示されないようになります(デザイン要素で非表示にするのではなく、本当に全く出力されなくなります)。編集した部分が完成したらショートコードを削除して更新すれば完了!というものです。

使い方は簡単、非出力にしたい部分を

 [no-output]ここに出力しない文章などを入れる[/no-output]

とするだけです。ブロックエディタで複数のブロックを非出力にすることもできますし(下サンプル画像)、クラシックブロック内で任意に設定することもできますし、旧エディタ(ビジュアル、テキスト)でも機能します。また、1つの投稿や固定ページに何度でも使えますから便利ですね。

※上の例の場合、「表示しない」と書かれたブロックと「見出し」と書かれた見出しブロックが表示されなくなります

ショートコードが動作するようにする

このショートコードを使えるようにするには、前述したように今使っているテーマへ少しコードを加える必要があります。手順は以下の通りです。

管理画面から外観テーマエディタをクリックします

※初めてこの画面を開くとき警告表示されることがありますが「了解しました」をクリックすればOKです。

次に画面右にあるファイルやフォルダの一覧から、「functions.php」を探してクリックします

凄い行数のファイルが開かれますから一番下まで移動して、以下のコードをコピペし、保存します。

/* [no-output]ショートコードで部分的に非表示にする */
function ha_no_output($atts) {
return '';
}
add_shortcode('no-output', 'ha_no_output');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

問題なく保存できれば、ショートコードが使えるようになりますから、今までの投稿や固定ページ、テスト的に新規作成するなどして試してみてください。

※保存時にエラーが出る場合は上の黄色い帯部分をクリックして対処方法をご覧ください


こんな簡単なコードで編集中の内容が見えなくなるようになるなんて・・・びっくりですよね?でも本当にこれだけなんです。おまけとして以下にコードの解説を付け加えておきますので参考までに。

(おまけ)コードの簡単な解説

WordPressの動作に関して何かの指示(命令)を与えるには、基本的に有効化しているテーマのfunctions.phpへ指示を行うプログラム(コード)を追加します。

コードの基本は「命令の名前」「命令の内容」「どんな動作をさせるか」という3つになります。これを踏まえて今回のコードを説明すると

1行目でfunction(命令しまっせ)、ha_no_output($atts)(ha_no_outputという名前の命令でっせ)と宣言

2行目でreturn ”;(”内容のないもの)をreturn(出力)してくださいなと命令

最終行でadd_shortcode(Wordpressで使える命令で「ショートコードを作ってちょ」という意味)、ha_no_outputの命令を「no-output」というショートコードで囲んだ部分のみ動作させなさいというものになります。

つまり「no-output」ショートコードで囲んだ部分については内容なしにしなさいねというものなんですね。functions.phpにはこの流れでいろいろな命令が書かれていますから、ちょうどいい機会なので覗いてみると楽しいかもしれませんね。

※functions.phpの内容はWordpressの動作で非常に重要なことが書かれていますから、誤って編集してしまったりしないようにくれぐれもご注意ください

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】