WordPress 自作のまとめ

WordPressの自作をした時テンプレートファイルのまとめです。

自作と言ってもここを参照しました。自分で作ってみることでよりWordPress のthemeがどう作られているか理解できたと感じます。

PCにローカル環境作るのは前の投稿を参照してください。

テンプレートファイルとは、WordPressのThemeを作っているPHPファイルでPHP code, htmlそしてテンプレートタグで構成されています。

テンプレートタグとは、WPの独自のfunciton(関数)でサイトのタイトルや内容などを表示することに使用されます。例えば、the_title() やthe_content()等です。

基本となるテンプレートファイル

以下が使用されているテンプレートタグです。

wp_head():  jQueryライブラリーやcssなどサイトの情報やメタデータが出力されます。

body_class(): WordPressページの <body> タグにクラスを追加

echo get_stylesheet_uri():スタイルシートの呼び出し

echo home url(): homeのURL出力

bloginfo(‘name’): ブログのタイトルの呼び出し

wp_nav_nemu(array ( )): ナビゲーションメニューの作成

 theme_location
functions.phpに記述した値と作成するメニューを関連付ける。
container
メニュー全体を囲むタグを指定する。メニュー全体が自動的にnavタグの中に出力される。
 container_class/container_id
全体を括るタグのクラス名とId名をつけることができる。
fallback_cb
メニューが表示されてないとき、意図しない表示(wp_page_menuが初期値)をしないように”を指定。

wp_footer():Header同様に自動的に項目が出力されます。システムやプラグインが情報を出力するのに必要なWPのFunctionです。

dynamic_sidbar(‘side-widget’):WidgetにSidebarが表示されます。

4. index.php
トップページやカテゴリー、タグ、エラーページなど一覧を表示するためのPHPファイルです。

home.php, category.php, archieve.php等がない時は全てindex.phpから表示されます。

上記の絵にあるように、 header、footer,  sidebarを呼び出してそれぞれの部分を表示させ、Main contentsも記述するテンプレートファイルです。

get_header():ヘッダーテンプレートを呼び出す。
get_sidebar():サイドバーテンプレートを呼び出す。
get_footer():フッターテンプレートを呼び出す。

if(have_posts()): while(have_posts()): the_post(): 投稿記事が存在したら(If)、投稿記事が存在する間(While) 記事を記述する。

post_class( ‘post-list’ ):post-listというクラスを作成する。

the_permalink():記事のリンクを貼る。

if( has_post_thumbnail() ):サムネイル画像が存在するなら、

the_post_thumbnail(‘medium’):サムネイル画像を中のサイズで貼る。

else:サムネイル画像がなければ(no-image.gifを出力)

endif:サムネイル画像IfのEndif

the_title():タイトル出力

echo get_the_date( ‘m-d-Y’ ):日付を月ー日ー年で表示

the_excerpt():抜粋を出力

endwhile; endif :投稿記事が存在したら(If)、投稿記事が存在する間(While)の終了

echo paginate_links( array(
‘type’ => ‘list’,
‘mid_size’ => ‘1’,
‘prev_text’ => ‘«’,
‘next_text’ => ‘»’
) ):ページネーションを表示

5. single.php
投稿したシングルのページを表示するためのPHPファイルです。

index.phpと同様にPostが存在すれば出力するようになっています。

echo get_the_category_list( ‘ ‘ ): 記事に設定されているカテゴリをリンク付きで呼び出す。

the_content():記事本文を出力。

php the_tags(~Tags:~):
記事に設定されているタグをリスト形式全て呼び出します。
最初に「Tags:」という文字が入るようにリストの中に組込む設定も行っています。

6. functions.php
Theme独自のFunction(関数)を定義するPHPファイルです。

add_theme_support(‘title-tag’): ヘッダーにタイトルを表示させます。

add_theme_support( ‘html5’, array( ‘search-form’, ‘comment-form’, ‘comment-list’, ‘gallery’, ‘caption’ ) ) :html5でマークアップさせます。  

add_theme_support( ‘automatic-feed-links’ ):Feedのリンクを自動で生成します。

add_theme_support( ‘post-thumbnails’ ):アイキャッチ画像を使用する設定です。

register_nav_menu( ‘header-nav’, ‘Header Navigation’):メニューのLocationにHeader Navigationを追加します。

register_nav_menu( ‘footer-nav’, ‘Footer Navigation’):メニューのLocationにFooter Navigationを追加します。

register_sidebar (array ()):

name

サイドバーに名前を付ける(Sidebar)

Id

ウィジットエリアにIdをつける。ここで指定した値を使ってSidebar.phpの中にサイドバーを呼び出す。

before_widget/after_widget

ウィジットの前と後の要素の値を指定。ウィジットアイテムの種類別に異なる Id/Class名が反映されるように、id=”%2$s” class=”%2$s”と記述。

各ウィジットごとの名前と各アイテム共通のSidebar-wrapperというクラス名が反映されるようになっている。

before_title/after_title

各ウィジットにタイトルが付けられた時のタグの設定。この場合h4を使用。

7. style.css
サイトのデザインを指定するスタイルシートです。

上記を記述してWordPressにUploadするとTheme概要に表示されます。

まとめると、

基本的なWordPressでのサイトを構成するテンプレートファイルとテンプレートタグ等は理解できたと思います。

WP独自のFunctionは多くあるのでこれからまた色々試していきたいと考えています。

Leave a Reply

Your email address will not be published. Required fields are marked *