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

投稿日：2017年5月30日更新日：2021年4月30日

概要
編集ページへのURL
作成したブックマークレット
まとめ

概要

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

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

ブックマークレットとは

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

参考：ブックマークレット – Wikipedia

編集ページへの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';

まとめ

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

執筆者：labo