WordPressテーマ作成《連載1》index.phpとstyle.css を用意

IVORYフレームワークを使って作る、シンプルで軽量なWordpressテーマを作成「連載1」

WordPressのテーマ作成の際、必須であるとされている「index.php」と「style.css」を用意します。
*この2つのファイルがあれば最低限のテーマとして成り立ちます。

style.css

今回は、フレームワークの「IVORY」を使いますので、IVORYに上書きする内容のみをstyle.cssに書き込みますが、最初に、コメントの形式で必ず「テーマ詳細」を記述する必要があります。

テーマ詳細の例

/*
Theme Name: Simplegate
Theme URI:
Description: WordPressテーマ「Simple Gate」
Version: 1.2.3
Author: Creators Gate
Author URI: http://www.creators-gate.com/
License: GNU General Public License, v3 (or newer)
License URI: http://www.opensource.org/licenses/gpl-3.0.html
*/

上記に続けて、ivory.cssを読み込む記述を記載。
ivory.cssは「css」フォルダーに格納します。

ivory.cssを読み込ませる記述

@import url(css/ivory.css);

style.css全文(とりあえず)

/*
Theme Name: Simplegate
Theme URI:
Description: WordPressテーマ「Simple Gate」
Version: 1.2.3
Author: Creators Gate
Author URI: http://www.creators-gate.com/
License: GNU General Public License, v3 (or newer)
License URI: http://www.opensource.org/licenses/gpl-3.0.html
*/

@import url(css/ivory.css);

/*------------------上書きするコードを以下に記述------------------*/

index.php

今回作るテーマは、ヘッダー、メインコンテンツ+右サイドバー、フッターの構成とします。
とりあえず、ヘッダー、サイドバー、フッターを読み込む記述を書いてみます。
各コンポーネントは後で用意します。

<!-- header.phpの読み込み -->
<?php get_header(); ?>
	
<!-- Main Column -->
		
<!-- sidebar.phpの読み込み -->
<?php get_sidebar(); ?>

<!-- footer.phpの読み込み -->
<?php get_footer(); ?>

メインコンテンツの中に基本的なループ等を書き込みます。
ivoryのグリッドを使うので、メインコンテンツ領域に「c9」のクラスを、サイドバーに「c3」のクラスを当てます。
グリッドを囲むラップ(ivoryでは「row」)はヘッダーとフッターに書き込みます。
「c3」はサイドバーに書き込みます。

<!-- Main Column -->
<div id="main" class="c9">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
<?php endwhile; // end of the loop. ?>
<?php endif; ?>
</div>

wp_link_pagesとedit_post_linkは記載するように推奨されているため記載しています。
edit_post_linkは消しても大丈夫です。

index.php全文(とりあえず)

<?php get_header(); ?>

<!-- Main Column -->
<div id="main" class="c9">
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(); ?>
<?php endwhile; // end of the loop. ?>
<?php endif; ?>
</div>

<!-- sidebar.phpの読み込み -->
<?php get_sidebar(); ?>

<!-- footer.phpの読み込み -->
<?php get_footer(); ?>

302