WordPress

WordPressサイトで現在表示しているページの編集ページを開くブックマークレットを作りました

投稿日:2017年5月30日 更新日:

概要

WordPressにログインした後、通常のページ(管理ページではなく)を表示すると、画面上部に管理ツールバーが表示されます。このツールバーには、現在のページを編集するためのリンクがあり、非常に便利です。
その時表示しているページが投稿ページの場合は、「投稿の編集」リンクが表示され、固定ページの場合は「固定ページを編集」リンクが表示されます。

しかし、時々この管理ツールバーが表示されないことがあるようです。原因はまだ分かっていませんが、このままでは不便なので、現在表示しているページの編集画面へ遷移するブックマークレットを作ってみました。

ブックマークレットとは
通常、ブラウザの「お気に入り」にはウェブページのURLを登録しますが、実は URLではなく JavaScriptで書いたプログラムを登録することもできます。プログラムを登録した「お気に入り」のことを「ブックマークレット」と呼びます。

編集ページへのURL

編集ページのURLは以下のようになっていました。

固定ページ

  • HTTP: http://example.com/wp-admin/post.php?post={ID}&action=edit
  • HTTPS: https://example.com/wp-admin/post.php?post={ID}&action=edit

投稿ページ

  • HTTP: http://example.com/wp-admin/post.php?post={ID}&action=edit
  • HTTPS: https://example.com/wp-admin/post.php?post={ID}&action=edit

{ID} には、そのページのID番号が入ります。

作成したブックマークレット

お気に入りに新規追加で、以下を登録して下さい。WordPressの編集したいページで、このお気に入りをクリックすれば、編集ページに遷移できます(ログインしている必要があります)。

javascript:var%20id=document.querySelector('body').className.split('%20').find(function(className){ return%20/^(page-id-.*)|(postid-.*)$/.test(className)}).replace(/[^0-9.]/g,"");window.location.href='/wp-admin/post.php?post='+parseInt(id)+'&action=edit'

このブックマークレットのJavaScriptコードを分かりやすく書くと、以下にようになります。

// 表示中のページのIDを取得して変数にセットします
var id = document.querySelector('body')
          // bodyタグにセットされているCSSクラス名を取得します
          .className.split(' ')
          // 'page-id-{ID}' もしくは 'postid-{ID}' という名前のクラス名を取得します
          .find(function(className){ return /^(page-id-.*)|(postid-.*)$/.test(className)})
          // 数値以外は削除して数字(これがIDとなっています)だけにします
          .replace(/[^0-9.]/g,"");
// IDを使って編集ページのURLを生成し、そのURLに遷移します
window.location.href = '/wp-admin/post.php?post=' + parseInt(id) + '&action=edit';

まとめ

もともと設定で、管理ツールバーを非表示にしている場合にも便利だと思います。

📂-WordPress
-,

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress に関する srcset と sizes 属性値の簡単な説明

目次1. はじめに2. srcset と sizes の仕組み3. WordPress での srcset と sizes3-1. sizes 属性3-2. srcset 属性3-3. [設定] &# …

WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

目次1. はじめに2. 想定している開発環境3. gettext のインストール4. 多言語対応の作業1. プログラム中の翻訳文字列を使用する箇所で、専用の関数を使うようにします。2. 翻訳ファイルを …

WordPress

WordPress:本文に<p>や<br>が自動で追加されないようにする方法(wpautop を無効にする)

目次1. WordPress の wpautop 関数2. WordPress は投稿や固定ページの本文に対して wpautop 関数を実行します3. 本文に対する wpautop 関数を無効にする方 …

WordPress

WordPress 5.4 以降で記事にリンクを貼る際のオプション

WordPress 5.4 以降で、記事にリンクを貼る際のオプションについて説明します。

WordPress

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

Table of Contents Plus (TOC+) という WordPressプラグインが生成した目次の直前に、ウィジェット を表示する方法について説明します。 ※ 2018年6月6日: 目次 …