テンプレート：single-blog.php

ブログの詳細ページ用テンプレートファイルです。

body_class();タグで出される値：class="wp-singular blog-template-default single single-blog postid-1178 wp-theme-test02 defaultClass"

タイトル：マークアップ: HTML タグとフォーマット

記事ID：1178
class="hoge post-1178 blog type-blog status-publish hentry blog_category-bing blog_category-google blog_category-lp blog_category-web-design blog_category-illust blog_category-campaign-website blog_category-design blog_category-blog blog_category-product-design blog_category-maintenance blog_category-report blog_tag-303 blog_tag-kaden-seihin"

■アイキャッチ画像（サイズ調整）：

■URLのみ：

日付：2013年1月11日
更新日：2020年03月13日（金）
著者：admin

タクソノミー関連の出力いろいろ

■カテゴリー（タクソノミー名：blog_category）
/ / / / / / / / / /
■タグ（タクソノミー名：blog_tag）
/

本文

見出し

見出し壱

見出し弐

見出し参

見出し四

見出し五
見出し六

引用 (Blockquote) テスト

一行の引用。

ハングリーであれ、愚かであれ。

cite 参照を含む複数行の引用。

これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。

スタン・ゲッツ

テーブル

社員 給料
山田太郎 1ドル スティーブ・ジョブズが必要なサラリーと同じ額。
田中花子 1,000万円 ブログを書くために必要になる資金。
山本次郎 1億円 百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子 10億円 特に理由は要りません。
定義リストタイトル
これは定義リストです。
定義
物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
ギャラリー
WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
Gravatar (グラバター)
グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

非順序リスト (ネスト化)

  • リスト項目 1
    • リスト項目 1
      • リスト項目 1
      • リスト項目 2
      • リスト項目 3
      • リスト項目 4
    • リスト項目 2
    • リスト項目 3
    • リスト項目 4
  • リスト項目 2
  • リスト項目 3
  • リスト項目 4

順序リスト (ネスト化)

  1. リスト項目 1
    1. リスト項目 1
      1. リスト項目 1
      2. リスト項目 2
      3. リスト項目 3
      4. リスト項目 4
    2. リスト項目 2
    3. リスト項目 3
    4. リスト項目 4
  2. リスト項目 2
  3. リスト項目 3
  4. リスト項目 4

HTML 要素タグテスト

他の HTML タグは FAQ をご覧ください。

住所タグ

以下は住所の例です。<address> タグを使用しています:

〒100-0000

東京都千代田区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 タグです。

記事が分割されいるときはここにページャーが表示される

コメント欄の表示

コメントは受け付けていません。

コメントリストのみの表示

著者情報の表示（！カスタム投稿バージョン！）

著者名：
admin
ユーザー名（ID）：
admin
上の名前：

下の名前：

ニックネーム：
admin
紹介文：

アバター画像（プラグイン併用！）：

この著者の記事一覧（現在のカスタム投稿に限定）：
この著者の”ブログ”記事一覧を見る
※著者別の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/markup-html-tags-and-formatting/

サムネイル（URL）：

投稿日：2013.01.11

カテゴリ： /  /  /  /  /  /  /  /  /  /   






ページリンク



  
※出力方法参考：ページリンクの出力

    




関連投稿（複数記事）



  
グローバル変数へセットすることで通常の投稿と同じような関数で値を取得することができる

  
※出力方法参考：関連オブジェクトの表示


      記事が見つかりません
        
    


  
グローバル変数を使わない場合は配列から必要のものを取り出していく

      


  
配列から何を呼び出せるのかを確認したい場合はvar_dumpを使うと一覧でみることができる

  
      






タクソノミー



カテゴリー名（ブロクのタクソノミー別アーカイブ）：






ユーザー



ユーザー名（ブロクの著者別アーカイブ）：











jQuery系







Googleマップ



  取得できる情報：
  
      

    
  
  
  
  
GoogleMapを開く










デイトピッカー



  年月日（曜日）：

  
  



デイト & タイムピッカー



  
  



タイムピッカー



  
  


 デイトピッカーとタイムピッカー（x2）を組み合わせることでセミナー情報っぽいフォーマットをつくることができる

 開催予定： - 

  



カラーピッカー



  


  








繰り返しフィールド







  参考：
  ACF 繰り返しフィールドの表示方法




  
※サブフィールドの取得は【the_sub_field】を使う

  
    
    
    記事が見つかりません
    
  
  








       
       
       
        

      



      

        

          
sidebar.php



ウィジェット








人気の記事
            

            



カテゴリー（ドロップダウン）




アーカイブ

			

			
カレンダー

	2026年1月
	
	

		月
		火
		水
		木
		金
		土
		日
	

	
	
	

		 1234
	

	

		567891011
	

	

		12131415161718
	

	

		19202122232425
	

	

		262728293031
		 
	

	
	
固定ページ

			

			
メタ情報

		

		






サイドバーで個別に使いそうなもの



検索フォーム


※この検索フォームは【物件情報】のみを対象とするようになっています。（functions.php使用）












カテゴリー（投稿タイプ：blog）






タグ（投稿タイプ：blog）






アーカイブ（投稿タイプ：blog）






固定ページ






物件タイプ（タクソノミー名：property_type）


※このタクソノミーは【物件情報】と【施工事例】２つカスタム投稿タイプで共有しているためそれらの合計数が出てしまう。
解決策（functions.php使用）






物件エリア（タクソノミー名：property_area）※階層構造あり






物件オプション（タクソノミー名：property_option）






人気記事の表示（プラグイン：WordPress Popular Postsと連携）






最新記事を5件取得（サブループ）





        

      



    



    
    

  

    


      
お問い合わせエリアを共通パーツ化してテーマフォルダに保存しています。

      

        テーマフォルダ内に「content.php」という名前で保存した場合は「get_template_part('content');」だけで読み込むことができます。

        「content-sample.php」という名前で保存した場合は「get_template_part('content','sample');」とすることで複数のパーツを作成して読み込んでいくことができます。

      

      
インターネットからのお問い合わせ