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

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました。かなり便利そうです。

WordPress の robots.txt に関する処理はどうなっているのか?

WordPressでの robots.txt に関する処理を調べてみました。 少しネットで調べてみると「robots.txt を自分で作成してルートディレクトリに置いておけば、それが使われるし、なけれ …

WordPress

【WordPress】img タグに自動的に追加される属性について

WordPressの投稿ページに画像を貼った場合、その img タグに自動的に追加される属性について説明します。

WordPress

WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加するサンプルページを作成しました

WordPress の持つ get_header(), get_footer() 関数を利用して、独自のPHPファイルにヘッダとフッターを表示するサンプルページを作成しました。 サンプルページのURL …

WordPress

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

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