A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

htmlファイルとスタイルシートをWordPressテーマ化させる方法

   

費用: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の直下に自分で作成したテーマのフォルダをうpすれば完了です!

 

これだけでは、Wordpressの機能は使いきれないので、

WordPress Codex 日本語版にてさまざまな機能のタグを検索して勉強していってください!

 - サイト作成, プログラミング

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事