読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【ワードプレスのスラッグは日本語NG】

f:id:wp-lesson:20170221144323j:plain

ワードプレスのページやカテゴリーにはスラッグという
ものがあり、公開ページのURL末尾に自動で付きます。
 
例)「日本語のスラッグ」というスラッグのページ
 
http://xxxx.com/日本語のスラッグ
 
ブログサイトなどでよく見かけますよね?
 
ワードプレス自分でスラッグを入力しない場合、
記事のタイトルがスラッグにコピーされるので、
スラッグを意識したことがない方も多いのでは
ないでしょうか?
 
また、テーマによっては body タグの id や class に
スラッグを埋め込むようになっている場合もあります。
 
例)

<body id="ここにスラッグ">

 
もしスラッグが日本語だと、HTMLに変換される際の
エンコード処理によって文字化けしてしまうので、
スタイルシートで使えない形になってしまいます。
 
ワードプレスの制作において、スラッグは
 
『このページの場合はこうしたい』
『このカテゴリーの場合はこうしたい』
 
というように、デザインやレイアウトを条件分けする
目的で読み取ることが多いので、日本語はご法度です。
 
例)「日本語のスラッグ」⇒「japanese-slug」
 
こうすれば、
 
http://xxxx.com/japanese-slug

<body id="japanese-slug">

のようになるので、スタイルシート
 

/* サイト全体のコンテンツ幅 */
.container { width: 980px; }

/* 特定のページだけコンテンツ幅を変える */
#japanese-slug .container { width: 100%; }

 
といったピンポイントな振り分けが可能になります。

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
実習と添削でHTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy