Wordpressの投稿（固定）IDを任意の文字と共にスラッグにして投稿（固定）一覧に表示する

# はじめに
:::note alert
この記事の方法は、新規でWPを立ち上げた際には「パーマリンク構造」を修正するだけでOKです。
既に記事がいくつか投稿されているが、日本語でスラッグが付与されたために、長い英数字に変換されて、QRコードや印刷物へのURL記載に支障が出ると言った場合を回避する為に下記記事の内容を参考にしてください。

このコードは、過去の記事のスラッグを一律で置換します。
不要になった場合、一覧の箇所はコードを消すと元通りになりますが、実際のURLは「パーマリンク構造」で変更したままになります。

既にアクセスが多い等でURLが変更できない場合もあるので、スラッグを変更する場合は慎重にアクセス解析などで確認してから行うようにしてください。
:::

Wordpress（以下WP）だけでなく、Webサイトを運用していく上でURLはできるだけ分かりやすいものにしていた方が良いと言うのはご存じかと思います。
ただ、HTMLとCSSだけのWebサイトであればHTMLファイルがそのままURLになってくれますが、WPの場合は、投稿や固定ページのタイトルがURLになることが標準となっており、下図の1行目の通り、日本語を強制変換したもので、長く分かりにくいURLになってしまいます。

特に、そのURLを利用してQRコードを作ったりする場合、あまり長いと複雑なQRコードになり、読み込みの関係で印刷物等で大きさが制限されたりします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004345/d941e7e4-cd69-27c6-02bc-0cae366d3f5a.jpeg" alt="投稿一覧_変なslug.jpg">

そのURL（以下スラッグ）を適正化にするために、通常ですと投稿画面の「URL」から手動で、そのページを英語で直訳したり、日本語をアルファベット表記にしますが、**既に大量の記事があり、手動でスラッグを変更するのは骨が折れる。** ついでにその作業を自動化できないものかと考えますよね。
またお客様からも「どーにかならんか」と相談されることしばしば。

本来は最初のWPを新規に立ち上げた段階でパーマリンク設定をIDにしておけば良いのですが、リニューアルとなった場合はそうもいかない、というかなり特殊な条件で使える凡人受けしない内容です。

# 新規にWPを立ち上げた人はこれだけ。既に記事がある人はこの作業とコード追加をしてください
`functions.php`記載するコードは、**スラッグをIDにする** のではなく、**投稿一覧にスラッグを表示しているだけ** なので、設定を変更しないと実際のURLはID表示にはなりません。
「設定」ー「パーマリンク」から「カスタム構造」にチェックを入れて`/massage-%post_id%/`としてください。

:::note warn
`/massage-`の部分は、「コード解説」でも注意している様に、コード内の`massage-`と同じ文言にして下さい。
:::

![パーマリンク.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004345/5d391bf3-3053-e69c-94d3-ec897353e773.jpeg)

パーマリンクの設定を変更したら、`.htaccess`も更新しましょう。

# コード
とりあえずコードだけという方は以下からどうぞ

```functions.php
//スラッグ表示--------------------------------------------
//投稿一覧に
function add_posts_column_title($colomun) {
  $colomun['slug'] = 'スラッグ';
  echo '<style>
  .fixed .column-slug {width: 15%;}
  </style>';
  return $colomun;
}
function add_posts_column($column_name, $post_id) {
  if($column_name == 'slug') {
    $post = get_post($post_id);
    //投稿IDを表示する
    $slug = $post -> ID;
    echo 'massage-' .esc_attr($slug);
  }
}
add_filter('manage_posts_columns', 'add_posts_column_title');
add_action('manage_posts_custom_column', 'add_posts_column', 10, 2);

//固定ページの投稿一覧に
function add_page_column_title($colomun) {
  $colomun['slug'] = 'スラッグ';
  echo '<style>
  .fixed .column-slug {width: 15%;}
  </style>';
  return $colomun;
}
function add_page_column($column_name, $post_id) {
  if($column_name == 'slug') {
    $post = get_post($post_id);
    $slug = $post -> post_name;
    echo esc_attr($slug);
  }
}
add_filter('manage_pages_columns', 'add_page_column_title');
add_action('manage_pages_custom_column', 'add_page_column', 10, 2);
```

:::note warn
固定ページ一覧については、固定ページは独自にスラッグをアルファベット化もしくは英語化するのが常だと思い、IDをスラッグに変換はしていません。
:::

# コード解説
## 投稿一覧に表示
投稿一覧には`manage_posts_columns`で「スラッグ」の項目を追加し、`manage_posts_custom_column`でその追加した項目に値を表示します。

```diff_php
function add_posts_column_title($colomun) {
  $colomun['slug'] = 'スラッグ';
  echo '<style>
  .fixed .column-slug {width: 15%;}
  </style>';
  return $colomun;
}
```
`$colomun`には項目の名称を入れます。
今回は、スラッグを表示する項目なので`'スラッグ'`と入れました。
`.fixed .column-slug`は、投稿一覧の幅や背景・文字色等の指定をcssで入れます。
`functions.php`に記載しているので、`<style>...</style>`は`echo`で出力するのを忘れずに。

さきほど作った`スラッグ`という項目にslug（ポストID）を表示します。
```diff_php
function add_posts_column($column_name, $post_id) {
  if($column_name == 'slug') {
    $post = get_post($post_id);
    //投稿IDを表示する
    $slug = $post -> ID;
    echo 'massage-' .esc_attr($slug);
  }
}
```
ここも特に難しい処理はなく、`get_post($post_id)`で`$post`を取得し、`$post->ID`を`$slug`に格納し、`echo`して表示します。
この時、そのままポストIDを表示しても良いのですが、URL的にどのページかわかりにくかったので、IDの前に`'massage-'`と表示しています。

:::note warn
`'massage-'`を変更する場合は、最初の「コードの前に、事前準備」で修正したパーマリンクの`'massage-'`の部分も修正してください。
:::

:::note info
ブログの場合は、SEO対策として、記事ごとにスラッグに手を入れるのが常かと思いますので、
```diff_php
echo 'massage-' .esc_attr($slug);
```
の箇所を
```diff_php
echo esc_attr($slug);
```
の方が良いかと思います。
パーマリンクもそれも合わせて修正してください。
:::

```diff_php
add_filter('manage_posts_columns', 'add_posts_column_title');
add_action('manage_posts_custom_column', 'add_posts_column', 10, 2);
```
最後は、`add_filter`で`manage_posts_columns`、`add_action`で'manage_posts_custom_column'を追加・表示します。

## 固定ページ一覧に表示
基本的には「投稿一覧」と同じですが、フィルターフックとアクションが`page`になっていますので注意してください。

```diff_php
function add_page_column_title($colomun) {
  $colomun['slug'] = 'スラッグ';
  echo '<style>
  .fixed .column-slug {width: 15%;}
  </style>';
  return $colomun;
}
function add_page_column($column_name, $post_id) {
  if($column_name == 'slug') {
    $post = get_post($post_id);
    $slug = $post -> post_name;
    echo esc_attr($slug);
  }
}
add_filter('manage_pages_columns', 'add_page_column_title');
add_action('manage_pages_custom_column', 'add_page_column', 10, 2);
```
# まとめ
`functiomns.php`にコードを追加するのは、敷居が高そうですが、テーマファイルをカスタマイズするには必須なので、テストサイトやローカル環境でテストしながら行ってみてください。
作業前には、データベースのバックアップも忘れずに。

案外簡単にできてしまいますが、ページ全体のURLを変更することになるので、アナリティクスなどでアクセス解析している場合は、慎重に検討して実装してください。

毎度、WPで15年ほどWebサイトを制作していますが、独学の為、解釈が違ったり記述が間違えていたりという部分あるかと思います。その場合は、ぜひコメントで教えていただけると幸いです。