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】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。

WordPress

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

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

WordPressで作られたサイトの利用テーマを調査する

ブラウザでサイトを見ていて、「これは WordPressを使っているのか?」「WordPressを使っているとしてら、何のテーマを使っているのか?」を調査する方法です。 ※ 100%分かるわけではあり …

WordPress

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

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

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。