WordPressのblog投稿で使うスラッグ入力欄を拡げる

先日自分のblogを見ていた人から「なんでBuddyPressの記事のスラッグが　bpinstall　とか　buddypress　を　bpって短くしちゃってるの？」と言われました。
すっかり忘れていたのですが、たしかにBuddyPressの記事をいくつか書いたのですが、名称が長すぎるためにスラッグをbpと省略しちゃっていました。
名称を省略するのはSEO的にも良くないのでは！？と言われたのでスラッグ入力欄を拡げて長い名前も問題なく入れられるようにしてみました。

どうして省略形のスラッグで入力したか？

最近では英単語などは　省略しない　のがマイブームです。なので大概の場合は英単語はそのままのものを使うのですが、スラッグに関しては時々短くしていました。

というのも、今回の　buddypressinstall　をスラッグの欄に入力すると、

こんな感じで入力欄からはみ出して、全体を見ることが出来なくなってしまいます。これがいやなのでつい長いスラッグを書かずに単語を省略したりしていました。

だったらスラッグの入力欄を大きくすればいい！

スラッグの部分のHTMLを見ると

<input name="post_name" type="text" size="13" id="post_name" value=""   />

こんな感じで、sizeが13となっているため大きさがこのぐらい小さいものになっちゃうようです。

管理画面のこの部分のソースを直してしまうと、アップデートの時などに上書きされてしまうのでこのソースは直しません。かわりに、使っている子テーマのfunctions.phpにスラッグの入力欄の幅を拡げるコードを書きます。

この方法はググって　LIGさんの

WordPress管理画面カスタマイズあれこれ10選

を参考にさせてもらいました。ありがとうございますm(_ _)m

使っている子テーマのfunctions.phpに

/* スラッグの入力欄を拡げる */
function ryus_expand_slug_input(){
    global $pagenow;
    if (is_admin() && ($pagenow=='post-new.php' || $pagenow=='post.php')) {
        echo '<style type="text/css">
            #post_name {
                width:350px;
            }
        </style>';
   }
}

add_action('admin_head', 'ryus_expand_slug_input');

このコードを追加します。

    if (is_admin() && ($pagenow=='post-new.php' || $pagenow=='post.php')) {

ここで「管理者で、現在のページが新規追加か編集画面だったら」という条件を聞いています。

その後に、スラッグ欄のid、post_name の幅を350pxに指定するcssを出力しています。

add_actionのadmin_headは、ダッシュボード画面のhead内に記述を追加するアクションなので、ここで出力したcssが投稿画面に適用されます。

カスタマイズした結果スラッグ入力欄が拡がりました！

これで再度投稿画面を表示すると

このように入力欄が拡がりました。

長い名前を入力しても全体が見えるので安心して長いスラッグを入力することが出来ます(^^)/