htmlファイルとスタイルシートをWordPressテーマ化させる方法
Author:
費用：0円 時間：15分
WordPressは更新が簡単です。
ということで、ブログじゃなくともWordpressを利用すれば簡単に利用できますよね。
なので、ページ数が少なく、更新頻度がそれほどではないホームページもWordpressにするのがおススメです！
ですが、最適なテーマがない・・・
ならば、自作で！
ということでhtmlとcss,JavaScriptを自分で書いてWordpressテーマに書き換えてみましょう。
sponsored link
WordPressテーマ化する方法
まず、少なくともページのTopページ（HTMLでもよい）とスタイルシートは作成しておきましょう。
そして、index.phpにファイル名を書き換えましょう。
そして、スタイルシートはファイル名をstyle.cssにして、以下のコードの書き足しましょう。
@charset "UTF-8"; /*--------------------------------------------------------- Theme Name: テーマ名 Theme URI: テーマを頒布する場合は、頒布しているサイトURL Description: テーマについての説明 Author: 作者 Author URI: 自分のサイトURL Version:バージョン ---------------------------------------------------------*/
ライセンスを自由にしたい場合は、GNUを記述する必要があります。
これで前提は完了です。
そして、何も書いていなくてよいので、function.phpを作成しておきましょう。
そして、作成したファイルはすべて、テーマ名を名付けたフォルダに格納しておきましょう。
これで最低限のWordpressとなります。
index.phpを分解
そして、よりWordpressの機能を活かすように、index.phpを機能別に分解していきましょう。
header.php
header.phpという新しいファイルを作成しましょう。
そして、まず少なくとも<html>~</header>までの部分を切り取って、header.phpペーストしましょう。
そして、index.phpから切り取った箇所に相当する場所に、
<?php get_header(); ?>
を挿入しましょう。
タイトル画像をメインコンテンツの上に普遍的に設置するならそれもheader.phpに代入しておくといいでしょう。
sidebar.php
sidebar.phpという新しいファイルを作成しましょう。
そして、まず少なくとも<aside>~</aside>までの部分を切り取って、header.phpペーストしましょう。
そして、index.phpから切り取った箇所に相当する場所に、
<?php get_sidebar(); ?>
を挿入しましょう。
footer.php
footer.phpという新しいファイルを作成しましょう。
そして、まず少なくとも<footer>~</footer>までの部分を切り取って、footer.phpペーストしましょう。
そして、index.phpから切り取った箇所に相当する場所に、
<?php get_sidebar(); ?>
を挿入しましょう
ページにおいて変動のない箇所を分解するといいですよ。
Single.php
これは分解とは違います。
個別ページの規定です。
index.phpをコピーライトして作成して、記事を挿入したい部分を削除して、
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('j') ?></span></div>
<div class="post-title">
<h2><?php the_title(); ?></h2>
<span class="post-cat"><?php the_category(', ') ?></span>
</div>
<div class="entry">
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '
<strong>Pages:</strong> ', 'after' => '
', 'next_or_number' => 'number')); ?>
</div>
<?php comments_template(); ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<span class="previous-entries"><?php previous_post_link(' %link') ?></span>
<span class="next-entries"><?php next_post_link('%link') ?></span>
</div>
<?php else : ?>
<h2>Not Found</h2>
Sorry, but you are looking for something that isn't here.
<?php endif; ?>
などと挿入しましょう。
page.php
固定ページの規定です。記事ページとほとんど同じです。single.phpのコードから不要な部分を削除して使うと便利ですね(^^)/
これであらかたのファイルが作成できました(*^^)v
ということでuploadしましょう。
そして、Wordpressのフォルダにuploadしていきましょう。
FTPなどで、wp-content/themesの直下に自分で作成したテーマのフォルダをうｐすれば完了です！
これだけでは、Wordpressの機能は使いきれないので、
WordPress Codex 日本語版にてさまざまな機能のタグを検索して勉強していってください！
