Blogger 「投稿を編集」ボタンを復活させる

いつの間にか消えていた「投稿を編集」ボタンを再び表示させる方法をメモメモ…

ひさしぶりに Blogger のレイアウトを変更したところ、各投稿のフッター部分に表示されていたはずの鉛筆ボタンが消えていることに気が付きました。ググってみるとどうやら2021年に仕様変更があった模様。幸いにも代替コードを紹介しているサイトがあったので、変更点や修正内容のポイントをメモしておきます。

テンプレートの書き換え

代替コードは下記のサイトで紹介されているものを利用します。

Foire aux questions Blogger (Octobre 2021) - Blogger Code PE
https://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html
こちらのページ内にある "Comment afficher le crayon de modification des articles sur le blog ?" という項目に修正前と修正後のコードが記載されているので、テンプレートのソースコードの該当部分を書き換えましょう。変更するのは処理の呼び出し(b:include)ではなく処理の中身(b:includable)のほうなので注意。テンプレートの種類によっては挙動やレイアウトがおかしくなる可能性もあるので、バックアップは忘れずに。

★修正前

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

★修正後 (2行目は出典元のURLなので省略可)

<b:includable id='postQuickEdit' var='post'>
  <!-- https://bloggercode-blogconnexion.blogspot.com/2021/10/faq.html -->
  <b:with value='data:view.isPage ? "blog/page/edit/" : "blog/post/edit/"' var='path'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:with>
</b:includable>

これをコピペして終わり！…でもいいのですが、それだと不具合が起きたときに自力で修正できなくなってしまうので、一応上記のコードの変更点がどういう意味なのかを(自分が理解している範囲で)解説しておきます。

data:post.editUrl

どうやら「投稿を編集」ボタンが表示されなくなった根本的な原因はdata:post.editUrlが機能しなくなったことにあるようです。本来であれば編集ページに遷移するURLを返してくれるはずなのですが、この機能が廃止されたらしく(https://bloggercode-blogconnexion.blogspot.com/2021/10/posts-editUrl.html)、現在は何の文字列も返さなくなってしまっています。

そこで、まずは修正前のコードの2行目と7行目にある<b:if cond='data:post.editUrl'>と</b:if>を削除。これは「data:post.editUrlが存在する場合のみ次のコードを実行する」という意味の条件式です。当然これがある限り何も表示されないので、丸ごと取り除いています。

data:post.adminClass

「編集ボタンをブログ管理者にのみ表示する」という仕組みを担っているのがdata:post.adminClassというデータです。このデータはblog-admin pid-***(***は複数桁の数字)というクラス名を返します。そして閲覧者がブログ管理者だった場合にだけdisplay:blockあるいはdisplay:inlineというスタイルが読み込まれ、ボタンが表示されます。一方、ブログ管理者以外にはitem-controlクラスのdisplay:noneだけが適用されてボタンが見えなくなる、という仕組みになっているようです。

そのうちdata:post.adminClassも廃止されるかも…という情報もチラッと見かけましたが、現時点(2022年9月)ではまだ機能しているので当面はそのまま残しておいて大丈夫だと思います。

data:view.isPage

前述のとおりdata:post.editUrlが機能しないので編集ページに飛ぶリンクを手動で設定しないといけないのですが、実はこれが少し厄介です。Blogger の記事には「投稿」と「ページ」の2種類があり、対象がどちらかによって編集ページのURLも変わってきます。

投稿の場合
https://www.blogger.com/blog/post/edit/ブログID/記事ID

ページの場合
https://www.blogger.com/blog/page/edit/ブログID/記事ID

これを解決しているのが修正後のコードの3行目です。data:view.isPageは対象の記事が「ページ」であれば true を「投稿」であれば false を返すので、その値に応じて別の文字列を割り振っています。ここで割り振った文字列に path という名前をつけておき、5行目のdata:pathで参照するという流れです。

その他、鉛筆のアイコンやdata:top.editPostMsg(「投稿を編集」または「ページを編集」という文字列)は普通に機能しているので特に変更はありません。

というわけで以上、編集ボタン消滅を修正するコードの解説でした。環境によってはうまく動かなかったり、勘違いしている部分もあるかもしれません。参考程度に見てもらえると嬉しいです。そもそも公式のリファレンスがほぼないうえ、Googleの判断次第で仕様も変わりかねないので、正確な情報を伝えるのが難しいんですよね…

おねむゲーマーの備忘録

2022年9月7日