HTMLサイトからワードプレスのテーマを作る方法

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  HTMLサイトからワードプレスのテーマを作る方法

HTMLサイトからワードプレスのテーマを作る方法

1.ヘッダーの部分を切り取り、header.php で保存。

ヘッダーの部分には <?php get_header(); ?> と記載して header.php を呼び出す

ヘッダーをページごとに分けたい場合は、header-1.php 等という新しいファイルを作り、呼び出すときは

<?php get_header(“1”); ?>

と記載する

 

2.フッターの部分も切り取り footer.php で保存

フッターの部分に<?php get_footer(); ?> で呼び出す

3.サイドバーの部分も同じく。sidebar.php で保存

<?php get_sidebar(); ?> で呼び出す

4.記事一覧ループ(繰り返し)部分は loop.php (名前は何でもOK 例えばの話)で保存

<?php get_template_part( ‘loop’ ); ?> で呼び出す

1から4はワードプレスのインクルードタグという http://wpdocs.osdn.jp/%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%89%E3%82%BF%E3%82%B0

 

5.loop.php を作る

繰り返し記事の部分は 各記事で変わる部分のみ以下のように変更(テンプレートタグという http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0)

記事タイトル部分(ループ内)  <?php the_title(); ?>

記事タイトルリンク付 <a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>

記事へのリンク(ループ内) <?php the_permalink(); ?>”>

(ループ外)<?php echo the_permalink(); ?>

記事投稿日時  <?php the_date(); ?>(1日1回のみ表示) 又は <?php the_time(‘Y年m月d日’); ?>

カスタムメニュー(要functions.php) <?php wp_nav_menu(); ?>

記事のカテゴリ(リンク付き ループ内 ul liで表示)  <?php the_category(); ?>

記事のカテゴリの名前のみ

記事本文を表示(ループ内) <?php the_content(); ?>

記事の抜粋(ループ内)<?php the_excerpt(); ?>

アイキャッチ(ループ内 要functions.php) <?php the_post_thumbnail(); ?>

(ループ外) <?get_the_post_thumbnail(); ?>

アイキャッチURL <?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>

コメントのリスト <?php wp_list_comments(); ?>

参考になる記事: 「投稿記事の○件目」で条件分岐 http://www.imaginationdesign.jp/blog/wordpress/2296/

5.sidebar.php を作る 以下記述でウイジェットを使う

 

  6.functions.php を作る

必要な部分を追加

カスタムメニューを設置する

functions.phpで有効かしたら、

設置する場所に以下のように表示する

 

  7.header.phpを作る

1で作ったheader.phpをテンプレートタグ()を使ってワードプレス使用にしていきます。

 

 

</head>の前に、必ず <?php wp_head(); ?> と記載する!

パンくずリスト作成

functions.phpにパンくずを表示するコードを記述し、 パンくずを表示したいところには <?php breadcrumb(); ?> と記述する

 

8.index.php を作る

ヘッダー・ループ・サイドバー・フッターに分けたので、それぞれを組み合わせれば一覧ページの完成!

投稿の下にページャーをつけて次へ、前へ、をつけます。

次のページ(古い記事)へのリンク <?php next_posts_link(‘« PREV’); ?>

前のページ(新しい記事)へのリンク <?php previous_posts_link(‘NEXT »’); ?>

 

9.footer.php を作る

7のようにテンプレートタグに書き換えるところは書き換え、

</footer>の前には、必ず <?php wp_footer(); ?> と記載する!

10.single.php を作る

投稿の記事のシングルページです。

index.php を少しだけアレンジ。

ページのタイトルにリンクが必要ないので削除。

ページャーは次の記事のタイトルを取得して記載します。

ページャーの部分は以下に変更 ループ内に書かないといけないようなのでループ内に記載

 

コメント欄を表示するための関数を入れる

 

9.style.css を作る

冒頭に、以下のようなコメントを入れる

 

ワードプレスで検索フォームを作る方法

※URLが変更になった場合は301設定を忘れずに!

301.htaccessなどで保存して、アップロードは名前を変更して。

.htaccess のファイル名で転送したい(古い)URLのディレクトリ内にアップロードする。

以下はwwwなしにURLを統一。

RewriteEngine on RewriteCond %{HTTP_HOST} ^(www.jplan.me)(:80)? [NC] RewriteRule ^(.*) http://jplan.me/$1 [R=301,L]

以下はindex.htmlをなしに統一

RewriteEngine on RewriteCond %{THE_REQUEST} ^.*/index.html RewriteRule ^(.*)index.html$ http://jplan.me/$1 [R=301,L]

以下はぺーじURLを変更した際に記載

RewriteEngine on RewriteRule ^old.html$ http://jplan.me/new.html [R=301,L]

 

※ショートコードをテーマ内で使う場合

<?php echo do_shortcode(‘ショートコードをここに記載’); ?>

※条件によって呼び出すファイルを変更する

<?php if ( 条件() )   { ?> 条件にマッチしたときに表示するコンテンツ <?php } ?>

 

条件の書き方

is_home() // メインブログページが表示されている場合

is_single() // 個別記事が表示されている場合

is_single(‘1’)//ID1の個別記事が表示されている場合

is_single(array(1,2,3))//ID1.2.3の個別記事が表示されている場合

in_category(5)//カテゴリ1の個別記事が表示されている場合

in_category( array( 1,2,3 ) ) //カテゴリ1,2,3の個別記事が表示されている場合

(参照:http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/in_category)

is_singular() /is_single()、is_page() 、is_attachment()のどれかがtrueの場合

is_page() / 固定ページが表示されている場合

is_page(’25’) / 固定ページでIDが25の投稿が表示されている場合

is_page_template() / ページテンプレートで作った固定ページが表示されている場合

is_category(‘6′) / カテゴリIDが6の記事が表示されている場合

in_category( array( 1,2,3 ) )/ カテゴリIDが1.2.3の記事が表示されている場合

(参照:http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_category)

is_archive() / アーカイブページが表示されている場合

is_search() / 検索結果ページが表示されている場合

is_paged() / 表示中のページが複数のページにわたる場合

is_attachment() / 記事またはページの添付ファイルが表示されている場合

has_excerpt() / 投稿に手動で書かれた抜粋がある場合

has_post_thumbnail / アイキャッチが表示されている場合

 

カスタムフィールドに記載がない場合の条件分岐

 

 カスタムフィールドの値を別ページで表示

カスタムフィールドをループ外で使う

 

固定ページで投稿一覧を表示するテンプレートを作る

(テンプレートネーム:News の場合) テンプレートの一番上に以下のコードを追加することで固定ページからテンプレートが選べるようになる。

<?php /* Template Name: News */ ?>

 

ループの前に以下を記載することで投稿の一覧が表示される。

<?php query_posts(‘post_type=post&paged=’.$paged); ?>

他は index.phpと同じ書き方

※検索エンジンに余計なファイルをインデックスさせないようにする

robots.txt の名前で以下を記述してアップロード

 

※カスタム投稿タイプを利用する

functions.phpに以下のコードを記述

参照元

http://kachibito.net/wordpress/theme-development-flow.html

 

ワードプレスのコードをワードプレス外で使用する方法

<?php require(‘./news/wp-blog-header.php’);?>

を頭につけてれば同じドメイン内の別ディレクトリの、.phpファイルであればワードプレスのコードが使える。

../../wp-load.phpの部分は使用するファイルからみて書き換えてください。

 

カテゴリスラッグをクラス名などに使う

 

 

参考記事:http://webdesignrecipes.com/wordpress-customize-with-functions-php/

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報