ワードプレスTips

ワードプレスの使い方やカスタマイズを備忘録としてまとめています。

固定ページをトップページとして設定する

固定ページを利用してトップページを制作する方法です。

作成済みの固定ページを管理画面の「設定」→「表示設定」を開きます。

f:id:ryo919:20160928142304p:plain

フロントページの表示」の「固定ページ」をチェックして「フロントページ」の選択リストから制作済みの項目を選んでから「変更の保存」をしてください。

 

下記の例では「サンプルページ」を選んでいます。

f:id:ryo919:20160928142535p:plain

テーマ解析:ブランクテーマ『underscores』

f:id:ryo919:20160919135044p:plain

ワードプレスのテーマを制作したくても、何からしたらいいか迷いませんか?

子テーマでカスタマイズが一番楽な方法だと思いますが

テーマを制作を理解するためにブランクテーマを利用したテーマ制作をしてみます。

 

ブランクテーマはワードプレスのテーマで最小限のファイル・機能のみで作成しているのでカスタマイズして新たなテーマを制作するのに適しています。

 

そこで人気のブランクテーマ『underscores』を解析して最低限の機能・構造を調べました。

underscores.me

 

まずはテーマ名(例:test)を記入してGENEATEをクリック

Advanced Optionsをクリックで他の項目を設定可能

f:id:ryo919:20160919135053j:plain

すぐにダウンロードが完了するので解凍してください。

まずは必要のないファイルを削除します。

rtl.cssアラビア語など右から左へと文章を書く言語用

README.md:説明文

公式テーマ作成の場合に必要なファイル

screenshot.png:テーマのスクリーンショット

license.txt:ライセンスの記載

重要な部分から

 index.php

<?php

get_header(); ?>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
if ( have_posts() ) :

if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>

<?php
endif;

/* Start the Loop */
while ( have_posts() ) : the_post();

/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );

endwhile;

the_posts_navigation();

else :

get_template_part( 'template-parts/content', 'none' );

endif; ?>

</main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

動作の流れ

index.php

・ヘッダーを読み込む。header.php テンプレートファイルを読み込みます。

get_header();

関数リファレンス/get header - WordPress Codex 日本語版

・コンテンツ開始部分のHTMLコード

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

・投稿データが存在するかの確認

if ( have_posts() ) :

関数リファレンス/have posts - WordPress Codex 日本語版

分岐(1)投稿データがある場合

分岐(2):ブログ投稿インデックスページでフロントページでなければ

・個別記事ページでループ外に記事のタイトルを出力します。

テンプレートタグ/single post title - WordPress Codex 日本語版

分岐(2):その他の条件

ループで投稿データを出力

while ( have_posts() ) : the_post();

the_postループで次の投稿データを表示する時にテンプレートを読み込む

template-parts/content.php

get_template_part( 'template-parts/content', get_post_format() );

関数リファレンス/get post format - WordPress Codex 日本語版

投稿記事の投稿フォーマットを返します。 

ループ終了時

the_posts_navigation() | Function | WordPress Developer Resources

次の投稿ページ、または前の投稿ページへのナビゲーション用

分岐(1)投稿データがない場合

関数リファレンス/get template part - WordPress Codex 日本語版

template-parts/content-none.phpを読み込む

 ・コンテンツ終了部分のHTMLコード

</main>
</div>

・サイドバーの読み込み。sidebar.phpを読み込む
get_sidebar();

関数リファレンス/get sidebar - WordPress Codex 日本語版

・フッターの読み込み。footer.phpを読み込む
get_footer();

関数リファレンス/get footer - WordPress Codex 日本語版

次のテンプレート調査は次回更新します。

固定ページ系リンクまとめ(作成途中)

固定ページでデフォルト(page.php)以外のテンプレートを利用する

例えば「page-2.php」を作成して設置すると投稿時にテンプレートのセレクトメニューから選ぶことができます。

テンプレートファイルに「page-2」を記述することで認識できます。

/*

* Template Name : page-2

*................

参考記事

www.virment.com

ワードプレスのテーマ作成系のリンクまとめ(作成途中)

ワードプレスのテンプレート構造は自由に組み合わせて利用する事ができます。

それらをパズルのように組み合わせてテーマを制作する必要があります。

テーマを作成するには必要な知識ですのでテーマ作成時には覚えてください。

テンプレート入門 - WordPress Codex 日本語版

ワードプレスの単純なページ構造

header.php:ヘッダー

コンテンツ部分

footer.php:フッター

◆基本的なテンプレートファイル

インクルードして各テンプレートを読み込む

ヘッダー:header.php

<?php get_header(); ?>

フッター:footer.php

<?php get_footer(); ?>

index.phpを作成

ループ - WordPress Codex 日本語版

ヘッダーとフッターの間に投稿データをループさせる必要があります。

ループ内で利用する投稿データを取得するテンプレートタグ

投稿のタイトルの表示

<?php the_title( $before, $after, $echo ); ?>

$beforeオプション:タイトルの前に置くテキスト

$after:オプション:タイトルの後に置くテキスト

$echo:オプション:タイトルを表示(true)または変数へ返す(false)

<?php the_title( '<h3>', '</h3>' ); ?>

結果

<h3>タイトル</h3>

現在の投稿の公開時刻を表示

<?php the_time( $d ); ?>

$d:オプション:時間の表示フォーマット指定

例)24時間表記

<p>投稿時刻: <?php the_time('g:i'); ?></p>

結果

投稿時刻: 10:36

例)日付

<div><?php the_time('Y年n月j日'); ?></div>

結果

2016年9月19日

例)日付と時間

<p>投稿日: <?php the_time('Y年n月j日'); ?> @ <?php the_time('g:i a'); ?></p>

結果

投稿日:2016年9月19日 @ 10:36

 

参考

日付と時刻の書式 - WordPress Codex 日本語版

 

記事が属するカテゴリ

<?php the_category( $separator, $parents, $post_id ); ?>

$separator:オプション:カテゴリを表示するときの区切る文字列や記号

デフォルトでは、番号なし箇条書き(<ul>)でリンクを並べます。

例)半角空白区切り指定

<p>Categories: <?php the_category(' '); ?></p>

結果

Categories: WordPress Computers Blogging

例)コンマ区切り指定

<p>Categories: <?php the_category(', '); ?></p>

結果

Categories: WordPress, Computers, Blogging

 投稿以外のデータ取得

 サイドバー: 「sidebar.php」を読み込む

<?php get_sidebar(); ?>

サイドバーから検索フォームを表示

<?php get_search_form(); ?>

関数リファレンス/get search form - WordPress Codex 日本語版

◆条件分岐で自動的に読み込まれるテンプレートファイル

アーカイブ:archive.php

  • アーカイブタイトル(タグ別、カテゴリー別、年月日別、作成者別アーカイブ)の表示。
  • 投稿リストを概要もしくは全文形式で表示する。(概要か全文かは)どちらか1つ、適切な方を選ぶ。
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。

アーカイブインデックスページの作り方 - WordPress Codex 日本語版

singular.php (V4.3~)

single.phpとpage.php共通のテンプレートファイル。固定ページと投稿ページで同一テンプレートを使用したい場合

個別投稿表示:single.php

  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
  • 投稿のタイトルと本文を表示する。
    • タイトルはその投稿へのセルフリンクではなく、プレーンテキストとする。
  • 投稿日を表示する。
  • (適切であれば) 作成者名を表示する。
  • 投稿カテゴリーと投稿タグを表示する。
  • 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。
  • コメントリストとコメントフォームを表示する。
  • previous_post_link()next_post_link() を使って、次の記事とひとつ前の記事へのナビゲーションリンクを表示する。

固定ページ:page.php

  • 固定ページのタイトルと本文を表示する。
  • コメントリストとコメントフォームを表示する。(コメント機能がオフの場合を除く)
  • 分割された投稿のナビゲーションリンクをサポートする為に wp_link_pages() を記述しておく。
  • タグ、カテゴリー、日付、作成者などのメタデータは表示しない。
  • 編集権限のあるログイン中のユーザーには "Edit" (編集) リンクを表示する。