【.htaccess】設定ファイルで出来ること

設定ファイル.htaccess、私はリダイレクトぐらいでしか利用していないのですが、色々便利なので、しっかり理解するためにまとめてみたいと思います。

.htaccess とは

.htaccess(ドット・エイチ・ティー・アクセス)とは、Apache を用いた Web サーバーの管理ファイルです。( Apache は一時期6割ぐらいのシェアがありましたが、最近 Nginx のシェアが伸びてきているみているみたいですね。.htaccess で設定を行う場合は、利用している Web サーバーが Apache なのか要確認です。)

Apache の設定は、サーバー管理者なら、httpd.conf で行うのですが、私のように、レンタルサーバーを利用している立場ですと、httpd.conf をいじるなんてこと、できません。httpd.conf で行う設定を、サイトの管理者レベルでも一部行えるのが、この.htaccess ファイルです。ただ、.htaccess で利用可能なコマンドは、httpd.conf で許可されているものに限ります。上手くいかないようであれば、利用可能なコマンドかどうか、サーバー会社側に問い合わせが必要ですね。

設定は割合簡単で、ディレクトリ単位で行います。

「.」で始まると、一瞬、拡張子か何か?と思ってしましますが、UNIX系のOSでは隠しファイルを意味しています。

.htaccess でよく利用される設定

出来ることはたくさんあるのですが、よく使われているものをピックアップして、次回以降一つずつまとめていきたいと思います。。

  • リダイレクト (Redirect)
  • URLやドメインが変わって、旧URLから新URLへの自動遷移に利用します。
    HTML のヘッダに書き込むことでもリダイレクトは可能ですが、SEO 的に、設定ファイルで行った方がいいなどとも言われていますね。

  • リダイレクトの細かな設定 (mod_rewrite)
  • mod_rewrite モジュールは、URL の書き換えを行うものですが、その機能を利用してリダイレクトさせることもできます。Redirect ディレクティブより細かな設定が出来ます。「wwwありなし設定」、「index.htmlありなし設定」、「https(SSL)へリダイレクト」など。

  • エラーページの設定 (ErrorDocument)
  • ページがなかった時、問題やエラーが発生したときの動作を指定できます。これを指定していないと、ユーザは別の URL へ移動してしまうかもしれないし、レンタルサーバーの広告などが表示される場合もあるので、他のページにリダイレクトさせるか、特定のメッセージを表示するなどの設定をしておいた方が良いです。

  • デフォルトページ設定 (DirectoryIndex)
  • クライアントがディレクトリ名の最後に「/」を指定した場合に返すディレクトリインデックスを指定できます。「index.html」「index.php」など。

  • ベーシック認証
  • ディレクトリなどに認証を付けてID/パスワードを確認するダイアログを挟むことができます。「.htaccess」だけでなく「.htpasswd」というファイルも必要です。

  • アクセス制限 (Deny / Allow)
  • 外部からのアクセスを拒否または許可することができます。IPアドレス、ホスト名などを指定できます。

.htaccess の設置場所


.htaccess はディレクトリごとに有効になります。この図の場合、.htaccess(A)は、blue-box ディレクトリと、その中に含まれる yellow-box ディレクトリに有効となります。
.htaccess(B) は、yellow-box のみに有効となります。
全く外にある green-box ディレクトリは、.htaccess(A)、(B)ともに、影響を受けません。

.htaccess の基本的な書き方

ファイル名: .htaccess
テキストエディタで作成したファイルは、拡張子無しで “.htaccess” として保存します。OS の方で、拡張子無しの保存が出来ない場合は、取りあえず “.htaccess.txt” として、転送後にファイル名を変更します。

コメントアウト: # で始まる行
“#” で始まる行がコメントになります。基本的には、コメント行は独立させます。

文字コード: UTF-8
テキストエディタで保存の際に、文字コードを “UTF-8” に指定します。

改行コード: LF
テキストエディタで保存の際に、改行コードを “LF” に指定します。
改行をすると、構文の終端とみなされるので、基本的に構文の途中で改行はしません。
また、ファイルの最終行には空行を入れる必要があります。

転送場所: ディレクトリごとに有効
.htaccess の有効範囲はディレクトリごととなります。(上記、「.htaccess の設置場所」参照)
複数 .htaccess ファイルがある場合、内容が被れば、より深い階層のものが上書きされます。

パーミッション: 644
Web サーバに転送後、パーミッションを “644(rw-r–r–)” に指定します。

正規表現:Macht の含まれるディレクティブ、RewriteRule、RewriteCond で利用可能
正規表現について詳しくはこちら⇒ 正規表現の基本
後方参照について詳しくはこちら⇒後方参照

【CSS / HTML】img に入る隙間って何だろう?

img の下に入る隙間


margin も padding も 0 なのに、なぜか img の下に隙間が入ってしまう。何ででしょう?
これ、地味に困るんですよね。
レイアウトが若干ずれるし、ネガティブマージンで見出しを画像に重ねようとしても、計算通りいかない・・・

原因は、img はインラインレベルの要素なので、デフォルトで vertical-align: baseline となっているからです。空間に引かれたベースラインの上に、画像が表示されるという考え方です。ベースラインに揃えられた画像の下には、任意の隙間ができます。

<① vertical-align で上または下に揃える >
img タグに vertical-align: top または vertical-align: bottom を指定することで、画像を上揃えか下揃えにして、ベースラインの下の隙間が無くなります。

img {
vertical-align: bottom; /* または vertical-align: top; */
}

<② display で img をブロックレベルの要素化にする >
display: block でブロックレベルの要素化することで、インラインレベルの配置にまつわるベースラインは消えます。ですが、ブロックレベルとして扱われるので、基本的には、隣接する要素とは縦方向に並びます。(横方向に並びません。)

img {
display: block;
}

ブロックレベル、インラインレベル、それぞれの特徴をよく知ることが大切ですね。

img の横に入る隙間


img と img を横並びに隙間なしに表示させたいのに、こんな風に、間に隙間が入ることがあります。

これは、html の書き方によります。
次の様に、二つの img タグを改行して記述して書いた場合です。

<img src="cat-dog.jpg">
<img src="hedgehog.jpg">

隙間を消すためには、これを改行せずにつなげて記述します。

<img src="cat-dog.jpg"><img src="hedgehog.jpg">


これで隙間が消えます。小さなことですが、気を付けなくてはいけないことですね。

【CSS】margin の相殺を理解する

きっちり計算してレイアウトを作ったのに、大きさが合わない・・・。
margin が思ったように反映されない?どうして?
margin の相殺を理解していないと、そんなことになったりしますよね。
どんな場合に margin の相殺が起きるのか、起きないのかのまとめです。

どんな時に margin の相殺が起こるのか

細かな条件や例外を除いて、ざっくり言ってしまえばこれです。

「縦方向に接するブロックレベルの要素間の margin は相殺される」

隣接する margin は大きい方が適用されます。
要素同士が親子関係である場合、横方向の margin も接しますが、縦方向は相殺が起こり、横方向は起こりません

margin の相殺例外: 兄弟関係の要素

兄弟関係の要素に以下のモジュールやプロパティが指定されている場合、相殺は起こりません。

  • フレックスボックス・レイアウト
  • グリッド・レイアウト
  • position プロパティ(fixed、absolute が指定されている)
  • float プロパティ(left、right が指定されている)

margin の相殺例外: 親子関係の要素

親子関係の要素に以下のモジュールやプロパティが指定されている場合、相殺は起こりません。

  • フレックスボックス・レイアウト
  • グリッド・レイアウト
  • position プロパティ(fixed、absolute が指定されている)
  • 親要素に border が指定されている
    (border-top 指定 → margin-top は相殺なし)
    (border-bottom 指定 → margin-bottom は相殺なし)
  • 親要素に padding が指定されている
    (padding-top 指定 → padding-top は相殺なし)
    (padding-bottom 指定 → padding-bottom は相殺なし)
  • 親要素の heigh に数値が指定されている場合、margin-bottom は親要素のものが採用される
    (heigh: auto の場合、相殺が起こる)

margin の相殺の特殊ケース: 空要素

空要素(コンテンツの高さがゼロ)の場合のみ、margin の相殺は特殊です。

  1. まず、空要素の中の margin-top と margin-bottom の間で相殺が起こります。大きい方が採用されます。
  2. 次に、空要素と隣接する要素との間に相殺が起こります。上の要素の margin-bottom、下の要素の margin-top、空要素の margin で一番大きいものが採用されます。

【CSS】メディアクエリを使ってレスポンシブWebを作る

メディアクエリと、Flexboxを使って、PC・タブレット・スマホと、3段階の画面サイズに合わせてレスポンシブWebを作ってみました。
サンプルページ:https://exp.hazu.jp/media-query/media-query.html
仕組みをまとめてみたいと思います。

どのように表示させたいのか

スマホ縦 → 1カラン
スマホ横・タブレット縦 → 2カラン
タブレット横・PC → 3カラン

ディバイスによるブレイクポイント

3段階の画面サイズに合わせて切り替えたいのですが、ブレイクポイントは何ピクセルにするのか、というのが問題ですね。Googleのディベロッパーツールによれば、こうなっています。
(以下の単位はCSS で利用する「CSS ピクセル」で「画面解像度」ではありません。iOS では「csspx」、Android では「dp」。)

スマートフォン

対応 横幅 高さ
iPhone 5/SE 320 568
iPhone 6/7/8 375 667
iPhone 6/7/8 Plus 414 736
iPhone X 375 812
Android(ほとんどのスマホ) 360 640

タブレット

端末 横幅 高さ
iPad 768 1024
iPad Pro 1024 1366
Android Sサイズ 600 960
Android Mサイズ 768 1024
Android Lサイズ 800 1280

これより、こんな3段階にしてみました。

メディアクエリ区分け(width)

スマホ縦: ~499px
スマホ横+タブレット縦: 500px ~ 800px
タブレット横+PC: 801px~

メディアクエリ

< HTMLのメタ情報 >
まず、HTML の<head>の部分で、で、「ビューポート=ディバイスの画面サイズ」になるように指示します。
(「ビューポート」については、前回、まとめました。→ 【CSS】よく使う単位 & ビューポート単位

<meta name="viewport" content="width=device-width,initial-scale=1">

< メディアクエリの書き方 >
CSS のメディアクエリを利用して、ブレイクポイントごとに条件分けしていきます。

@media screen and (max-width:499px) { /* 1カランになるよう記述 */ }
@media screen and (min-width:500px) and (max-width:800px) { /* 2カランになるよう記述 */ }
@media screen and (min-width:801px){ /* 3カランになるよう記述 */ }

< CSS例 >

/* スマホ縦対応 1カラン */
@media screen and (max-width:499px) { 
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 100%;
}
}

/* スマホ横&タブレット縦対応 2カラン */
@media screen and (min-width:500px) and (max-width:800px) {
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 50%;
}
}

/* タブレット横&PC対応 3カラン */
@media screen and (min-width:801px){
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.item {
	width: 33.3%;
}
}

【CSS】よく使う単位 & ビューポート単位

最近よく見かけるビューポート単位。ビューポートという概念自体もなんとなくしか分かっていないので、前から CSS でよく使われている単位と一緒にまとめてみます。

絶対的な単位

単位 説明 ピクセル換算
in 1インチ = 2.54センチメートル 96px
cm 1センチメートル = 10ミリメートル 約37.80px
mm ミリメートル 約3.78px
pt 1ポイント = 1/72インチ 約1.33px
pc 1パイカ = 12ポイント 16px
px ピクセル 1px

文字に使われる相対的な単位

単位 説明
em 親要素のフォントサイズが基準
rem ルート要素(普通はHTML)のフォントサイズが基準
% その要素のサイズが基準
ex その要素の小文字「x」の高さが基準
ch その要素の数字「0」の幅が基準

ビューポートを基準にした相対的な単位

ビューポートとは:ブラウザが Web ページをレンダリングする際に想定する仮想的な「表示領域」

っていうことなんですが、分かりづらいですよね。色々調べたんですが、こんな感じかと思います。
(以下の「px」は「画面解像度」ではありません。CSS で利用する「CSS ピクセル」です。)

  1. ビューポートの幅 500px と設定したとする。仮想で500pxのウィンドウでレタリングしますよーということ。
  2. 実際の画面幅が、500pxより大きければ、拡大されて表示される。
  3. 実際の画面幅が、500pxよりちいさければ、縮小されて表示される。

色々試して見たのですが、色々な条件が絡み合って、必ずしもそうとは言えないのですが、ざっくりとした考え方としてはそんな感じです。

ビューポートは HTML の head の meta 要素で指定します。ビューポート幅 500px の場合はこうなります。

<meta name="viewport" content="width=500">

仕組みとしてはこうなんですが、レスポンシブ Web デザインを考える場合、ディバイスの画面サイズに合わせて、ビューポートを合わせる、というのが理想になります。

<meta name="viewport" content="width=device-width,initial-scale=1">

width=divice-width」と指定することで、ディバイスの画面サイズに合わせて、ビューポートの幅をフレキシブルに変化させる、ということになります。

ビューポートがフレキシブルに変化するとなると、それぞれの要素の大きさも、相対的に変化します。そこで、ビューポートの幅や高さを基準とした、相対的な単位を利用する方がいいのではないか、という考えに基づいて利用されるのが、「ビューポートを基準にした相対的な単位」とういうことになります。

単位 説明
vw ビューポートの幅に対する1/100の単位
vh ビューポートの高さに対する1/100の単位
vmin ビューポートの幅と高さのうち、小さい方の値に対する1/100の単位
vmax ビューポートの幅と高さのうち、大きい方の値に対する1/100の単位

【CSS】overflow-wrap (word-wrap) と word-break の違い

HTMLで文章を書く場合、表示範囲の一番最後まで来た時の改行は、何も指定していない場合、以下の通りです。

日本語:単語の途中であろうと、自動改行(禁則処理あり)
英数字(適当なスペースあり):スペースに合わせて自動改行(禁則処理あり)
英数字(表示範囲を超える連続する長いもの):改行されずはみ出す

特に、この長い英数字の改行を制御するのに便利な CSSプロパティ、overflow-wrap (word-wrap) と word-break 、違いは何なんでしょう?

word-break : 表示範囲最後まで来た時、(単語が長かろうが短かろうが)単語の途中で改行させるかどうか

overflow-wrap (word-wrap) : 表示範囲に収まらない長い連続する文字列を、途中で改行させるかどうか

(②ですが、word-wrap が古い名称で、サポートされていないブラウザもあるため、新しい名称の overflow-wrap と併記した方がいいようです。)

↓このような文字列がどのように表示されるか、それぞれ見ていきます。

例)CSSで改行が指定されていないデフォルト

word-break プロパティ

word-breakは3つの値(normal, break-all, keep-all)が取れます。

1.word-break: normal
デフォルトと同じです。

2.word-break: break-all
表示範囲を超える長さの英数字の文字列、適当なスペースの入っている短い文字列、どちらにしろ、範囲に収まるように、単語の途中で自動改行
されます。
日本語はデフォルトと同じく、単語の途中で自動改行されます。

3.word-break: keep-all
表示範囲を超えたとしても、決められた場所でしか改行しません。
英数字: 「スペース(空白)」「?」「-」
日本語: 「句読点(、。)」「スペース(空白)」「?」「-(全角ハイフン)」

overflow-wrap (word-wrap) プロパティ

overflow-wrap は2つの値(normal, break-word)がとれます。

1.overflow-wrap: normal
デフォルトと同じです。

2.overflow-wrap: break-word
表示範囲を超える長いの英数字の文字列: 範囲に収まるように、単語の途中で自動改行
適当なスペースの入っている短い英数字の文字列: 単語の切れ目で自動改行
日本語はデフォルトと同じく、単語の途中で自動改行されます。

overflow-wrap (word-wrap) が効かない場合

一般的な文章なら、overflow-wrap: break-word が一番利用しやすい感じがしますが、「内容が定まるまで幅の決まらない要素」がある場合、効きません。

1.shrink-to-fit width
Flexbox(親要素が display:flex)や、display:inline-block、float、position:absolute は、内容によって幅が決まるので、自動改行が効いていないように振る舞います。
→ 回避策 width:auto になっているので、幅(width)や最大幅(max-width)を明示する。

2.テーブル
テーブルの親要素(table-layout:auto)、子要素(display:table-cell)の場合、子要素に overflow-wrap: break-word を指定しても自動改行が無視されます。
→ 回避策 親要素に対して、固定レイアウトアルゴリズム table-layout:fixed を指定する。

【CSS / HTML】width の外になぜはみ出すの?基本の基本の復習

先日ですね、PHP で吐き出される文字列が、改行させずに、なぜか width で指定した幅からはみ出してしまう・・・ということがあって。
どうしてだろう?どうしてだろう?PHP の方が間違っているのかと思い込んで、散々考えても分からなかったので、人に聞いてみたら、「CSS で普通に word-wrap: break-word とか word-break: break-all で制御すればいいだけなんじゃないの?」と言われ、言われてみればそうですね。一発で改行されました。思い込みって怖いなー。盲目になってしまった時は、人に聞くのが一番ですね・・・。

word-wrap: break-word と word-break: break-all については、また考察したいのですが、width を無視して要素がはみ出る場合について、ごく基本の基本に立ち返って、まとめてみたいと思います。

インラインの非置換要素

HTMLの要素は、インライン、インラインブロック、ブロックと3つのレベルに分けられます。
さらにインラインの要素は、width、height の指定できる置換要素、width、height の指定できない非置換要素があります。

インラインの置換要素(width、height を指定できる)

img iframe video embed audio canvas object

インラインの非置換要素(width、height を指定できない)

span ruby sub sup strong em mark b i small br u s ins del
cite q abbr dfn code kbd samp var bdo label

要するに、span 等のインラインレベルの非置換要素に、width を指定しても無視されます。

margin、border、padding を考慮せず、width:100% に指定

width:100% とは、content の幅です。左右の margin、border、padding の数値が「0」でなければ、その分、親要素の width からはみ出します。

回避策① calc()関数を使う

margin:0; border:2px; padding:2px の場合、左右のはみ出しの合計は 8px。calc()関数を使って、8px を引きます。
width: calc(100% – 8px)
「-」と「+」の演算子の前後にはスペースを入れるルールあり

回避策② 入れ子にする

外側の要素を width:100% でいっぱいに広げ、内側の要素の margin、border、padding、content(width:auto)を包むという考え方です。

回避策③ box-sizing プロパティの利用

box-sizing: border-box
と記述することで、要素に指定した width および height の中で border、padding を取るようにブラウザに指示。
margin は含まれない点に注意。

box-sizing を利用する際は、プレフィックスも記述した方がいいようです。
-webkit-box-sizing: border-box; /* Webkit */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* 標準 */

width の幅を超える連続する英数字

日本語や、適度にスペースの入った英語等の文章は、width で指定された幅に合わせて、自動改行されますが、切れ目のはっきりとしない連続する英数字は、width の幅からはみ出して表示されます。長いURL など、そういう例ですね。
この場合は、word-wrap: break-word や word-break: break-all を使って制御を掛けるのですが、長くなりそうなので、それはまた次回、じっくりまとめたいと思います。

【WordPress プラグイン】All-in-One WP Migration

WordPressサイトのサーバー移転って、普通にするとなると、結構、時間も手間もかかるんですよね。FTPで転送して(これが時間掛かります!)・・・データベース動かして・・・.htaccessとかファイル書き替えて・・・内部リンク直して(とても面倒臭い)・・・
私も一度やってみましたが、うんざりしましたよ。

今回、またお引越ししなくちゃいけなくなって、なんか簡単な方法はないかなってプラグイン検索してみたら、サーバー移転&バックアップ機能のあるプラグインって、いくつもあるんですね。「All-in-One WP Migration」を試してみましたが、すごーーーく簡単です!あの手動で移転の大変さが嘘みたいに、スムーズに移転ができました。
簡単 & 速い & 内部リンク自動書き換え と、本当素晴らしいです。

All-in-One WP Migrationでサーバ移転の手順

(前提として、引っ越し先サーバにもWordPressがインストールされている必要があります)
1. All-in-One WP Migration をインストール
2. 引っ越し元からデータ・エクスポート
3. 引っ越し先へデータ・インポート

All-in-One WP Migrationをインストール

引越し元、引っ越し先、両方のWordPress管理画面より、それぞれ、「プラグイン」>「新規追加」で「All-in-One WP Migration」を検索し、インストールします。有効化すると、左の欄に、「All-in-One WP Migration」と表示されます。

引っ越し元からデータ・エクスポート

引越し元のWordPress管理画面より、「All-in-One WP Migration」>「エクスポート」をクリック。

「検索(文字列)置換(別の文字列)データベース内」→ 書き換えたい文字列があれば、ここに入力
「高度なオプション」→ エクスポートしたくないファイルがあれば、ここで選択
「エクスポート先」→ 無料版では「ファイル」しか選べません。使用中のディバイスにダウンロードされます。

緑の枠に囲まれた「~をダウンロード」というのが出てきたら、そこをクリックします。

引っ越し先へデータインポート

引越し先のWordPress管理画面より、「All-in-One WP Migration」>「インポート」をクリック。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックすれば完了なんですが、ここで、私はちょっと問題がありました。
ダウンロードしたファイルのサイズは28MB。だけど、「最大アップロードファイルサイズ」が、5MBとなっています。どうやらこれは、利用しているサーバの方で、初期設定がそのようになっているらしく、それを変更する必要がありました。

いくつか方法があるようですが、私はその下のところの「最大アップロードファイルサイズをあげる方法」と書かれたリンク先の1番目に書かれていた、「.htaccessファイルをアップデートする」というのをしました。

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

WordPressディレクトリ直下にある.htaccessファイルに、</IfModule>の直前、このように書き込みます。これで、最大アップロードファイルサイズが128MBに広がりました。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックして完了です!
あっという間にお引越しできました!

【WordPress プラグイン】List Category Posts

WordPressのプラグイン(拡張機能)って、本当に豊富で、こんなのないかな、って検索すると、必ずあるっていうぐらい、何でもありますね。本当に便利です。

投稿記事をカテゴリー毎、タグ毎に、一覧を表示させるプラグイン、ないかな、って思って、検索して見つけた「List Category Posts」。簡単なショートコードで一覧を作れます。

プラグイン有効化後、投稿記事や固定ページに書き込むショートコードをまとめます。

投稿タイトルの一覧表示

新着記事一覧を表示する、一番単純なショートコード。

ショートコード: [catlist]

投稿日を表示

新着記事一覧と投稿日を表示するショートコード。

ショートコード: [catlist date=”yes”]

「date_modified=”yes”」を使うと、投稿日ではなく、更新日が表示されます。

抜粋を表示

新着記事一覧と抜粋を表示するショートコード。

ショートコード: [catlist excerpt=”yes”]

カテゴリーを指定

カテゴリーを指定して、そのカテゴリーの一覧を表示するショートコード。

ショートコード-01: [catlist name=”カテゴリー名”]
ショートコード-02: [catlist id=カテゴリーID]

カテゴリーIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

タグを指定

タグを指定して、そのタグの一覧を表示するショートコード。

ショートコード-01: [catlist tags=”タグ名”]
ショートコード-02: [catlist id=タグID]

タグIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

AND指定

複数のカテゴリーまたはタグをAND指定して、その一覧を表示するショートコード。「+(プラス)」を挟み、複数指定できる。

ショートコード: [catlist id=カテゴリーID+カテゴリーID]
例: [catlist id=4+5]

(「+」の前後にスペースを挟まない)

OR指定

複数のカテゴリーまたはタグをOR指定して、その一覧を表示するショートコード。「,(コンマ)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID,カテゴリーID]
例: [catlist id=4,5]

(「,」の前後にスペースを挟まない)

除外指定

あるカテゴリーまたはタグから、別のカテゴリーを除外指定して、その一覧を表示するショートコード。「-(マイナス)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID-カテゴリーID]
例: [catlist id=5-4]

(「-」の前後にスペースを挟まない)

現在のカテゴリーを指定

現在のカテゴリーを指定して、記事の一覧を表示。関連記事として機能として利用。

ショートコード: [catlist categorypage=”yes”]

表示件数指定

記事の一覧に表示される件数を指定します。

ショートコード: [catlist numberposts=記事数]

(記事数は半角数字です)

「numberposts」を指定しない場合、「設定」で指定したページ数になります。
(「設定」>「List Category Posts」>「Number of Posts」に入力されている数字です。)

ページナビゲーションの表示

記事の一覧の下に、ページナビゲーションが表示されます。

ショートコード: [catlist pagination=”yes”]

「pagination」を指定しない場合、「設定」での指定に応じます。
(「設定」>「List Category Posts」>「Pagination」が「true」だと、ページナビゲーションは表示されます。)

アイキャッチ画像の表示

アイキャッチ画像をサムネイルとして、記事の一覧と共に表示。

ショートコード: [catlist thumbnail=”yes”]

アイキャッチ画像のサイズ

アイキャッチ画像のサイズを指定するショートコード。

ショートコード: [catlist thumbnail=”yes” thumbnail_size=”値”]

指定可能な値は以下の通りです。
・ small ⇒ 小サイズ
・ medium ⇒ 中サイズ
・ large ⇒ 大サイズ
・ full ⇒ フルサイズ
・ 任意の幅と高さ ⇒ 数字,数字 (例: thumbnail_size=50,40)

その他、並び順の変更、カスタム投稿の表示、カスタムタクソノミーの表示など、たくさん機能があるみたいですね。とっても使い勝手のいいプラグインです!

【WordPress】記事やカテゴリーのIDの調べ方

WordPressでは、投稿記事、固定ページ、カテゴリー、タグに、それぞれIDが振られています。プラグインを利用する時や、PHPで所定の記事だけを処理したい場合など、このIDを利用することになります。

それぞれのIDの調べ方をまとめます。

投稿記事IDの確認方法


「投稿」>「投稿一覧」で一覧を表示し、IDを知りたい記事にカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、記事IDとなります。

もしくは、「投稿」>「投稿一覧」>(記事を選び)「編集」で、各記事の編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=556&action=edit
記事IDは、「556」となります。

カテゴリーIDの確認方法

「投稿」>「カテゴリー」で一覧を表示し、IDを知りたいカテゴリーにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「category&tag_ID=番号」の番号が記事IDとなります。

もしくは、「投稿」>「カテゴリー」>「編集」で、各カテゴリーの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「category&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=category&tag_ID=5&post_type=post
カテゴリーIDは、「5」となります。

タグIDの確認方法

「投稿」>「タグ」で一覧を表示し、IDを知りたいタグにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post_tag&tag_ID=番号」の番号が、記事IDとなります。

もしくは、「投稿」>「タグ」>「編集」で、各タグの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post_tag&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=post_tag&tag_ID=9&post_type=post

タグIDは、「9」となります。

固定ページIDの確認方法


「固定ページ」>「固定ページ一覧」で一覧を表示し、IDを知りたい固定ページにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、固定ページIDとなります。

もしくは、「投稿」>「固定ページ」>(ページを選び)「編集」で、各固定ページの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、固定ページIDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=51&action=edit
固定ページIDは、「51」となります。