[WordPress] パーマリンク(URL)のオススメ設定2つ

こんにちは、@cappeeです。

今改めてWordPressのパーマリンク(URL)をどうしようか迷っています。

permalink [WordPress] パーマリンク(URL)のオススメ設定2つ

現在はSEOを考慮し、カスタム構造で category+postname を設定し、都度カテゴリのスラッグ(英数字)や記事名を記述しているのですが、設定忘れがどうしても発生してしまうのと、地味な一手間をなくしてもっと効率化したいという点で変更しようか検討することにしました。

現在のWordPressではパーマリンクを変更してもデフォルトで自動的に301リダイレクトしてくれるので安心ですね。ただし、リダイレクトしてくれない設定もあるようなので必ず変更後は確認が必要です。

今まで運用してみた感じと他のブロガーさんの意見も参考に、自分なりにオススメの設定2つをご紹介します。

SEO重視なら category+postname

SEO重視なら私が今まで設定していたようなカスタム構造 category+postname を設定するのがオススメです。

/%category%/%postname%

%category%」には作成したカテゴリー名が入ります。そのままだと日本語で表示されてしまうので、必ず「スラッグ」にURL用の英数字のカテゴリー名を設定しましょう。

%postname%」にもデフォルトだと記事のタイトル名が日本語で入ってしまうので、記事の投稿画面の「パーマリンク」より英数字を設定します。(タイトルに英数字が含まれていると自動的に-をつけて生成してくれます)

※WordPress3.2以前は、「%postname%」「%category%」「%tag%」「%author%」から始まるパーマリンクは、パフォーマンス上の理由で非推奨となっていたようですが、最新のバージョンでは問題ないようです。

パーマリンクのSEO

SEO的にはURLにもキーワードが含まれていたほうが有利ですが、ただ劇的に差がでるかというとそうではなく、コンテンツが一番重要なのはかわりないので、念には念を、というSEO対策になります。

また、カテゴリーを含めた理由として、SEO的にページの構造化はとても大切だからです。あとあとカテゴリー名を変更しなくてすむように、考えてつけなければいけません。投稿時カテゴリーの選択は複数可能ですが、基本的にはカテゴリーはひとつだけチェックした方がいいかと思います。

ページ構造の最適化

上記の設定をするとカテゴリーページが2つできてしまいます。

  • カスタム構造で設定したURL:/%category%
  • デフォルトのカテゴリページURL:/category/%category%

ガッチャンコするために、「WP No Category Base」というプラグインを導入すると、デフォルトのカテゴリーページが「/%category%」というシンプルなURLになるので重複を防ぐことができます。

設定のデメリット

この設定のデメリットとしては、記事ごとに英数字のパーマリンクを設定する必要があるため、地味に一手間かかります。もし過去のパーマリンクと重複してしまった場合、自動的に数字をつけて回避してくれますが、カテゴリー名が違っていても同じ postname をつけることができませんのでご注意ください。

URLを短縮する

さらにURLの一番最後に「/(スラッシュ)」を入れなかった理由としては、最近はなるべくURLを短くするという傾向があるためです。SEO的には「/(スラッシュ)」があってもなくても、「.html」という拡張子を入れても特にかわりません。

SEOと効率化のいいとこ取りなら category+post_id

上記SEO重視の設定でもご紹介した通り、キーワードと構造化の観点からいってもカテゴリー名は設定しておいた方がいいかと思います。カテゴリー名のスラッグ設定もカテゴリーを新規で作成した時に設定するくらいなのでそこまでの手間もかかりません。

さらに効率化を考慮し、記事ごとに設定する必要があった postname ではなく、自動的に生成してくれる post_id にすることでSEOと効率化のいいとこ取りができます。

カスタム構造を下記のように category+post_id に設定します。

/%category%/%post_id%

こちらも「WP No Category Base」プラグインを導入してさらにURLを最適化しておくといいでしょう。

また、同様にURLの一番最後に「/(スラッシュ)」を入れずにURLは極力短縮しています。

ちなみに、カスタム構造で設定できるパーマリンクタグはたくさんあります。

  • %year% 投稿年
  • %monthnum% 投稿月
  • %day% 投稿日
  • %hour% 投稿時刻の時
  • %minute% 投稿時刻の分
  • %second% 投稿時刻の秒
  • %postname% 投稿タイトル(投稿スラッグ)
  • %post_id% 投稿ID
  • %category% カテゴリー名(カテゴリースラッグ)
  • %tag% タグ名(タグスラッグ)
  • %author% 著者名

さて、どちらにするか迷いますね。。どうしようかな。

[参考サイト]
WordPressのパーマリンクはどの形がベストなのか

Pocket
article clipper [WordPress] パーマリンク(URL)のオススメ設定2つ

Zen-Codingを自分なりにカスタマイズしてさらに効率化する方法

朝型になりたい、@cappeeです。

Dreamweaverでコーディングを効率良く行うために私もみんな大好きZen-Codingを使っています。

でも使っているデザインソフトやコーディングルールによって「展開後のコードを変えたい!」という時もあります。ので、カスタマイズしてみたところ、結構効率化できたと思うのでその方法と実際に変更したサンプルをまとめたいと思います。

Zen-Codingのカスタマイズ

下記のファイルを開きます。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver (バージョン)\ja_JP\Configuration\Commands\ZenCoding\zen_settings.js

zen_settings.js ファイルには展開前と後のコードが一覧で記述されているので、自分の使いやすいように編集してください。

“展開前”: “展開後”
“bgc”: “background-color:#FFF;”

「|」を書くと展開後にそこにマウスのポインターが来ます。

CSSのカスタマイズサンプル

今回修正したのは主にCSSですが、変更した点をメモしておきたいと思います。

修正

主な変更理由ですが、デザインはFireworks CS6を使用しているので、カラーコードは#付きで1クリックでコピーできます。CSSファイルに貼り付ける時は#なしでカラーコードのところにマウスポインターが来るのがベストです。よく展開するプロパティにそのあたりを適用しました。

colorcode Zen Codingを自分なりにカスタマイズしてさらに効率化する方法

"bgc": "background-color:#FFF;",→"bgc": "background-color:|;",
 "bd+": "border:1px solid #000;",→"bd+": "border:1px solid |;",
 "bdt+": "border-top:1px solid #000;",→"bdt+": "border-top:1px solid |;",
 "bdb+": "border-bottom:1px solid #000;",→"bdb+": "border-bottom:1px solid |;",
 "bdl+": "border-left:1px solid #000;",→"bdl+": "border-left:1px solid |;",
 "bdr+": "border-right:1px solid #000;",→"bdr+": "border-right:1px solid |;",
 "c": "color:#000;",→"c": "color:|;",

追加

ブロック要素をセンタリングする際によくつかうので、追加しました。デフォルトの「:」を打つのも面倒なので、今度全部の「:」をとって使ってみようかなと企んでいます。

"m:0a": "margin:0 auto;",

まだまだカスタマイズできそうなので、色々と試してみたいと思います。

[参考サイト]
DreamweaverでZen Codingの展開後の文字をカスタマイズするには? 

Pocket
article clipper Zen Codingを自分なりにカスタマイズしてさらに効率化する方法

[Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

もっともっと効率的にコーディングしたい@cappeeです。

Fireworks CS6に「CSSスプライト」が簡単に書き出せる新機能が加わったというので、今回怒涛のコーディング中にどうしても気になって使ってみました。

とても便利です。

CSSスプライトの書き出し方

スプライト用のページをつくって適当に画像をならべてそれぞれスライスします。

css sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

スライスの名前はクラス名をつけてください。

全選択か、書き出したいスライスのみを選択して右クリックし「CSSスプライトを書き出し」を選択します。

ファイル名はスプライト用の画像を読み込む background のクラス名と同じになります。

書き出す画像の形式を選ぶ場合は「オプション」をクリックしてください。

sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

形式は「最適化プリセット」から選択することができますが、PNGの8bitを選択したい場合はデフォルトだと含まれていせんので、あらかじめ「最適化」ウィンドウで指定し、右上にある矢印から「書き出し設定を保存」しておきます。

sprite3 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

保存すると「最適化プリセット」の一覧に表示されるので選択することが可能です。

sprite2 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

任意のフォルダに書き出すと、適当に配置したはずの画像がきれいに配置されたPNGスプライト用のCSSができます。

sprite4 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

画像が多いとファイル名を付けるのに時間がかかったり、どの画像をまとめるのが効率的か考えながらやっていると最初は時間がかかりましたが、次回からは倍速以上で作業できると思います。

一度書きだした画像に追加するとまた配置は変わってしまいますが、スプライト用のCSSをコピペするだけなので楽ちんです。

ページ単位とかカテゴリ単位とか、無駄な画像の読み込みをしないようにどの画像をまとめるのかは最初に考えておいたほうが良さそうですね。

スプライト用のCSS

実際に書き出されたCSSはこちらです。(今回クラス名はデフォルトのままです)

.sprite{ background:url("sprite.png") top left no-repeat; }
 ._r4_c3{ width:152px; height:38px; background-position:-30px -30px; }
 ._r8_c4{ width:20px; height:20px; background-position:-30px -98px; }
 ._r2_c2{ width:137px; height:19px; background-position:-30px -148px; }
 ._r10_c6{ width:15px; height:15px; background-position:-80px -98px; }
 ._r6_c10{ width:12px; height:12px; background-position:-125px -98px; }

コツをつかめば作業倍速&表示スピードの改善にもなっていいことづくめです。

Adobeのサイトでも紹介されているのでこちらもぜひご覧ください。

CSSスプライト書き出し機能の使い方

Pocket
article clipper [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利