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 の管理バー(admin bar) が表示されない場合の対処法

WordPress サイトの管理バー(admin bar) が表示されない場合の対応方法について説明しています。

WordPress

WP Cerber Security で「jQuery is not defined」エラーが発生した場合の対処法

WordPress のプラグイン「WP Cerber Security」で「Uncaught ReferenceError: jQuery is not defined」というエラーが発生した場合の対処法を紹介します。

WordPress

WordPress のプラグイン Autoptimize についての覚書

WordPress のプラグイン Autoptimize についての覚書です。

WordPress

WordPress: create-block して wp-env start する際の注意点

WordPress: create-block と wp-env を使う際の注意点について書いています。

Web Vitals

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress: 特定の記事に特定のCSSを出力する方法