テンプレート：single-blog.php
ブログの詳細ページ用テンプレートファイルです。
body_class();タグで出される値：class="wp-singular blog-template-default single single-blog postid-1148 wp-theme-test02 defaultClass"
タイトル：テンプレート: コメント
記事ID：1148
class="hoge post-1148 blog type-blog status-publish hentry blog_category-yahoo blog_tag-january blog_tag-february blog_tag-march"
■アイキャッチ画像（サイズ調整）：
■URLのみ：
日付：2012年1月3日
更新日：2020年02月22日（土）
著者：themedemos
タクソノミー関連の出力いろいろ
本文
この記事では、以下の場合のコメントをテストしています。
- 10レベルの深さのコメント
- コメントをページ送り (設定の仕方 ダッシュボード > 設定 > ディスカッション > 1ページあたり5件のコメントを含む複数ページに分割し、最初のページをデフォルトで表示する
- マークアップを使ったコメント / フォーマット例
- 画像のあるコメント
- 動画のあるコメント
- 作者によるコメント
- グラバターがある場合とグラバターが無い場合の初期設定の画像
コメント欄の表示
“テンプレート: コメント” への38件のフィードバック
コメントリストのみの表示
見出しのテスト
見出し壱
見出し弐
見出し参
見出し四
見出し五
見出し六
引用 (Blockquote) テスト
一行だけの引用:
笑う門には福来たる
この行は引用ではありません。以下は長い引用:
その途端でございます。今まで何ともなかった蜘蛛の糸が、急に※(「特のへん＋廴＋聿」、第3水準1-87-71)陀多のぶら下っている所から、ぷつりと音を立てて断きれました。ですから※(「特のへん＋廴＋聿」、第3水準1-87-71)陀多もたまりません。あっと云う間まもなく風を切って、独楽こまのようにくるくるまわりながら、見る見る中に暗の底へ、まっさかさまに落ちてしまいました。
後にはただ極楽の蜘蛛の糸が、きらきらと細く光りながら、月も星もない空の中途に、短く垂れているばかりでございます。
芥川 竜之介 – 「蜘蛛の糸」より
テーブル
| 社員 | 給料 | |
|---|---|---|
| 山田太郎 | 1ドル | スティーブ・ジョブズが必要なサラリーと同じ額。 |
| 田中花子 | 1,000万円 | ブログを書くために必要になる資金。 |
| 山本次郎 | 1億円 | 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。 |
| 中山愛子 | 10億円 | 特に理由は要りません。 |
リストタイプのテスト
- 定義リストタイトル
- これは定義リストです。
- 定義
- 物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
- ギャラリー
- WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
- Gravatar (グラバター)
- グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
非順序リスト (ネスト化)
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
順序リスト (ネスト化)
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
HTML 要素タグテスト
他の HTML タグは FAQ をご覧ください。
住所タグ
以下は住所の例です。<address> タグを使用しています:
東京都千代田区1-1-1
日本
anchor タグ (リンク)
これは <anchor> (もしくはリンクとも呼ばれます) の例です。
abbr タグ
この abbr は文章の中にある <abbr> タグの例です。
Acronym タグ (HTML5 では非推奨)
これは <acronym> タグを使用した TLA です。
Big タグ(HTML5 では非推奨)
このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。
Cite タグ
“Code is poetry.” —WordPress
Code タグ
<code> タグはこのように使います: word-wrap: break-word;
Delete タグ
<del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。
Emphasize タグ
<em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。
Insert タグ
<ins> タグは挿入されたコンテンツを意味します。
Keyboard タグ
このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。
Preformatted タグ
<pre> タグは複数行のコードのスタイリングに使います。
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
Quote タグ
デベロッパーズ、デベロッパーズ, デベロッパーズ…
–スティーブ・バルマー
Strike タグ (HTML5 では非推奨)
このタグは打ち消し線を表しています。
Strong タグ
このタグは太字テキストを表しています。
Subscript タグ
Subscript タグ <sub> を使うと H2O のような表示の際に「2」が下付きになります。
Superscript タグ
Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。
Teletype タグ (HTML5 では非推奨)
<tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル
Variable タグ
変数や引数を表す variables タグです。
見出しのテスト
見出し壱
見出し弐
見出し参
見出し四
見出し五
見出し六
引用 (Blockquote) テスト
一行だけの引用:
笑う門には福来たる
この行は引用ではありません。以下は長い引用:
その途端でございます。今まで何ともなかった蜘蛛の糸が、急に※(「特のへん＋廴＋聿」、第3水準1-87-71)陀多のぶら下っている所から、ぷつりと音を立てて断きれました。ですから※(「特のへん＋廴＋聿」、第3水準1-87-71)陀多もたまりません。あっと云う間まもなく風を切って、独楽こまのようにくるくるまわりながら、見る見る中に暗の底へ、まっさかさまに落ちてしまいました。
後にはただ極楽の蜘蛛の糸が、きらきらと細く光りながら、月も星もない空の中途に、短く垂れているばかりでございます。
芥川 竜之介 – 「蜘蛛の糸」より
テーブル
| 社員 | 給料 | |
|---|---|---|
| 山田太郎 | 1ドル | スティーブ・ジョブズが必要なサラリーと同じ額。 |
| 田中花子 | 1,000万円 | ブログを書くために必要になる資金。 |
| 山本次郎 | 1億円 | 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。 |
| 中山愛子 | 10億円 | 特に理由は要りません。 |
リストタイプのテスト
- 定義リストタイトル
- これは定義リストです。
- 定義
- 物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
- ギャラリー
- WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
- Gravatar (グラバター)
- グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
非順序リスト (ネスト化)
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
順序リスト (ネスト化)
- リスト項目 1
- リスト項目 1
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 2
- リスト項目 3
- リスト項目 4
- リスト項目 1
- リスト項目 2
- リスト項目 3
- リスト項目 4
HTML 要素タグテスト
他の HTML タグは FAQ をご覧ください。
住所タグ
以下は住所の例です。<address> タグを使用しています:
東京都千代田区1-1-1
日本
anchor タグ (リンク)
これは <anchor> (もしくはリンクとも呼ばれます) の例です。
abbr タグ
この abbr は文章の中にある <abbr> タグの例です。
Acronym タグ (HTML5 では非推奨)
これは <acronym> タグを使用した TLA です。
Big タグ(HTML5 では非推奨)
このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。
Cite タグ
“Code is poetry.” —WordPress
Code タグ
<code> タグはこのように使います: word-wrap: break-word;
Delete タグ
<del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。
Emphasize タグ
<em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。
Insert タグ
<ins> タグは挿入されたコンテンツを意味します。
Keyboard タグ
このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。
Preformatted タグ
<pre> タグは複数行のコードのスタイリングに使います。
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
Quote タグ
デベロッパーズ、デベロッパーズ, デベロッパーズ…
–スティーブ・バルマー
Strike タグ (HTML5 では非推奨)
このタグは打ち消し線を表しています。
Strong タグ
このタグは太字テキストを表しています。
Subscript タグ
Subscript タグ <sub> を使うと H2O のような表示の際に「2」が下付きになります。
Superscript タグ
Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。
Teletype タグ (HTML5 では非推奨)
<tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル
Variable タグ
変数や引数を表す variables タグです。
匿名ユーザー より: このユーザーは匿名で投稿しようとしています。
偽のメールを使っているため、関連付けられた Gravatar はありません。
サイト URL を指定していないため、コメント内でそのリンクが表示されないようにしてください。
匿名ユーザー より: このユーザーは匿名で投稿しようとしています。
偽のメールを使っているため、関連付けられた Gravatar はありません。
サイト URL を指定していないため、コメント内でそのリンクが表示されないようにしてください。
コメント ? コメント大好き !
コメント ? コメント大好き !
このテストはすごい !
このテストはすごい !
投稿者のコメントです。
投稿者のコメントです。
コメントスレッドのテスト。1階層目のコメント。
コメントスレッドのテスト。1階層目のコメント。
画像つきコメント
画像つきコメント
このテストについて絶対ブログを書こうと思います !
このテストについて絶対ブログを書こうと思います !
このテストはとても便利です ! いつも活用してます !
このテストはとても便利です ! いつも活用してます !
みんなコメントありがとう！
みんなコメントありがとう！
著者情報の表示（！カスタム投稿バージョン！）
themedemos
ユーザー名（ID）：
themedemos
上の名前：
下の名前：
ニックネーム：
themedemos
紹介文：
アバター画像（プラグイン併用！）：
この著者の記事一覧（現在のカスタム投稿に限定）：
この著者の”ブログ”記事一覧を見る
※著者別のURLは「https://ブログのURL/カスタム投稿名/author/著者ID/」のフォーマットで表示できるので リンクURLの末尾にこの著者のIDをくっつけるだけ！
カスタムフィールド関連の出力
参考：
Advanced Custom Fieldsの全フィールドタイプを徹底解説
フィールドグループの作成・設定方法
Advanced Custom Fields の取得・表示方法
テキスト系
1行テキスト（値の有無を判定して表示）
テキストエリア
数値・レンジ
メール・URL
パスワード（登録の有無で表示を切り替え／値そのものは出さない）
オブジェクト系
画像-配列を設定した場合
下記のように配列で画像に関するデータが保存されるので必要な項目を引き出してechoで出力する。
参考：Advanced Custom Fieldsで画像オブジェクトを使う方法
NULL
コードメモ：配列型で保存されているデータを取り出す方法
-----------------------
データ構造
-----------------------
array(
'url' => string()
'alt' => string()
'width' => int()
'height' => int()
'sizes' => array( //入れ子構造
'thumbnail' => string()
'thumbnail-width' => int()
'thumbnail-height' => int()
)
)
----------------------
取り出し方
----------------------
1.get_fieldで必要なデータを取り出す
$hoge = get_field('カスタムフィールド名');
$src = $hoge['url'];
$alt = $hoge['alt'];
$width = $hoge['sizes']['thumbnail-width'];
$height = $hoge['sizes']['thumbnail-height'];
2.echoで取り出したデータをそれぞれ吐き出す
echo $src;
echo $alt;
echo $width;
echo $height;
表示例：デフォルトサイズ
表示例：中サイズのサムネイル（300×225）
画像-URLを設定した場合
画像-IDを設定した場合
ファイル
画像と同様に配列、URL、IDのタイプがあるが基本はURLで十分（ファイル本体とダウンロードするデータ名を使い分けたい時は配列を使う）
登録されていませんWysiwygエディタ
oEmbed
選択肢系
セレクタ
チェックボックス
※タグで囲む場合
ラジオボタン
真偽値
真偽値（値なし/1）が返ってくるので、これを基準にトップページのループにこの記事を表示するかを判定させる。 「値なしだと〜しない」より、値ありをデフォルト設定にして「値ありだと〜する」の方が使い勝手がいい。
デフォルトでは[false]は出力されないので出したい場合は下記のようにする
false
関連コンテンツ系
リンク
タイトル：
URL：
開き方：
投稿オブジェクト（単一記事）
※出力方法参考：投稿オブジェクトの出力
記事タイトル：
パーマリンク：https://blog.simplate.net/blog/template-comments/
サムネイル（URL）：
投稿日：2012.01.03
カテゴリ：Yahoo
ページリンク
※出力方法参考：ページリンクの出力
関連投稿（複数記事）
グローバル変数へセットすることで通常の投稿と同じような関数で値を取得することができる
※出力方法参考：関連オブジェクトの表示
記事が見つかりませんグローバル変数を使わない場合は配列から必要のものを取り出していく
配列から何を呼び出せるのかを確認したい場合はvar_dumpを使うと一覧でみることができる
タクソノミー
ユーザー
jQuery系
Googleマップ
デイトピッカー
デイト & タイムピッカー
タイムピッカー
開催予定： -
カラーピッカー
繰り返しフィールド
※サブフィールドの取得は【the_sub_field】を使う
見出しのテスト
見出し壱
見出し弐
見出し参
見出し四
見出し五
見出し六
引用 (Blockquote) テスト
一行だけの引用:
この行は引用ではありません。以下は長い引用:
テーブル
リストタイプのテスト
非順序リスト (ネスト化)
順序リスト (ネスト化)
HTML 要素タグテスト
他の HTML タグは FAQ をご覧ください。
住所タグ
〒100-0000以下は住所の例です。
<address>タグを使用しています:東京都千代田区1-1-1
日本
anchor タグ (リンク)
これは
<anchor>(もしくはリンクとも呼ばれます) の例です。abbr タグ
この abbr は文章の中にある <abbr> タグの例です。
Acronym タグ (HTML5 では非推奨)
これは
<acronym>タグを使用した TLA です。Big タグ(HTML5 では非推奨)
このテストは大きな文字を表す
<big>タグの例ですが、このタグは HTML5 ではサポートされていません。Cite タグ
“Code is poetry.” —WordPress
Code タグ
<code>タグはこのように使います:word-wrap: break-word;Delete タグ
<del>タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに<strike>を使ってください)。Emphasize タグ
<em>タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。Insert タグ
<ins>タグは挿入されたコンテンツを意味します。Keyboard タグ
このあまり知られていない
<kbd>タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code>タグと同じようにスタイリングされます。Preformatted タグ
<pre>タグは複数行のコードのスタイリングに使います。.post-title { margin: 0 0 5px; font-weight: bold; font-size: 38px; line-height: 1.2; and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows; }Quote タグ
–スティーブ・バルマー
Strike タグ (HTML5 では非推奨)
このタグは打ち消し線を表しています。
Strong タグ
このタグは太字テキストを表しています。
Subscript タグ
Subscript タグ
<sub>を使うと H2O のような表示の際に「2」が下付きになります。Superscript タグ
Superscript タグ
<sup>を使うと E = MC2 のような表示の際に「2」が上付きになります。Teletype タグ (HTML5 では非推奨)
<tt>はあまり使われないタグですが、テレタイプテキスト として通常<code>タグのようにスタイルVariable タグ
変数や引数を表す variables タグです。
見出しのテスト
見出し壱
見出し弐
見出し参
見出し四
見出し五
見出し六
引用 (Blockquote) テスト
一行だけの引用:
この行は引用ではありません。以下は長い引用:
テーブル
リストタイプのテスト
非順序リスト (ネスト化)
順序リスト (ネスト化)
HTML 要素タグテスト
他の HTML タグは FAQ をご覧ください。
住所タグ
〒100-0000以下は住所の例です。
<address>タグを使用しています:東京都千代田区1-1-1
日本
anchor タグ (リンク)
これは
<anchor>(もしくはリンクとも呼ばれます) の例です。abbr タグ
この abbr は文章の中にある <abbr> タグの例です。
Acronym タグ (HTML5 では非推奨)
これは
<acronym>タグを使用した TLA です。Big タグ(HTML5 では非推奨)
このテストは大きな文字を表す
<big>タグの例ですが、このタグは HTML5 ではサポートされていません。Cite タグ
“Code is poetry.” —WordPress
Code タグ
<code>タグはこのように使います:word-wrap: break-word;Delete タグ
<del>タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに<strike>を使ってください)。Emphasize タグ
<em>タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。Insert タグ
<ins>タグは挿入されたコンテンツを意味します。Keyboard タグ
このあまり知られていない
<kbd>タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code>タグと同じようにスタイリングされます。Preformatted タグ
<pre>タグは複数行のコードのスタイリングに使います。.post-title { margin: 0 0 5px; font-weight: bold; font-size: 38px; line-height: 1.2; and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows; }Quote タグ
–スティーブ・バルマー
Strike タグ (HTML5 では非推奨)
このタグは打ち消し線を表しています。
Strong タグ
このタグは太字テキストを表しています。
Subscript タグ
Subscript タグ
<sub>を使うと H2O のような表示の際に「2」が下付きになります。Superscript タグ
Superscript タグ
<sup>を使うと E = MC2 のような表示の際に「2」が上付きになります。Teletype タグ (HTML5 では非推奨)
<tt>はあまり使われないタグですが、テレタイプテキスト として通常<code>タグのようにスタイルVariable タグ
変数や引数を表す variables タグです。
このユーザーは匿名で投稿しようとしています。
偽のメールを使っているため、関連付けられた Gravatar はありません。
サイト URL を指定していないため、コメント内でそのリンクが表示されないようにしてください。
このユーザーは匿名で投稿しようとしています。
偽のメールを使っているため、関連付けられた Gravatar はありません。
サイト URL を指定していないため、コメント内でそのリンクが表示されないようにしてください。
コメント ? コメント大好き !
コメント ? コメント大好き !
このテストはすごい !
このテストはすごい !
投稿者のコメントです。
投稿者のコメントです。
コメントスレッドのテスト。1階層目のコメント。
2階層目のコメント。
3階層目のコメント。
4階層目のコメント。
5階層目の深さのスレッド。
これは投稿者のコメントです。
6階層目のコメント。
7階層目のコメント。
8階層目のコメント。
9階層目のコメント。
10階層目の深さのスレッド。
これは投稿者のコメントです。
コメントスレッドのテスト。1階層目のコメント。
2階層目のコメント。
3階層目のコメント。
4階層目のコメント。
6階層目のコメント。
これも投稿者のコメントです。
6階層目のコメント。
7階層目のコメント。
8階層目のコメント。
9階層目のコメント。
10階層目のコメント。
これも投稿者のコメントです。
画像つきコメント
画像つきコメント
このテストについて絶対ブログを書こうと思います !
このテストについて絶対ブログを書こうと思います !
このテストはとても便利です ! いつも活用してます !
このテストはとても便利です ! いつも活用してます !
みんなコメントありがとう！
みんなコメントありがとう！