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: https://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: https://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(); ?>