LPをwordpress化させるときの方法を簡潔にまとめました!
目次
- 1.必要ファイルを用意する
- 2.index.htmlのファイル名をindex.phpに変更し、index.php内の記述を書き換える
- 3.style.cssにファイル名を記載
- 4.index.phpのheader部分を、header.phpへ、footer部分をfooter.phpへ移植する
- 5.header.php、footer.php、sidebar.phpの呼び出しコードを表示させたい画面ファイルに貼る
- 6.投稿ページ(記事ページ)を生成するテンプレートを作成
- 7.固定ページを生成するテンプレートを作成
- 8.wordpressナビをつける(おまけ)
- 9.フォルダをzipファイル化してwordpressのテーマにupload&有効化する
1.必要ファイルを用意する
- style.css
- functions.php
- header.php
- footer.php
- sidebar.php(サイドバー)
- index.php
- single.php(投稿ページ)
- page.php(固定ページ)
2.index.htmlのファイル名をindex.phpに変更し、index.php内の記述を書き換える
index.php
stylesheetとresponsiveファイル記載の変更
1 2 3 4 5 6 | //変更前 <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> //変更後 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css" type="text/css" > <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive.css" type="text/css"> |
imgファイル記載の変更
1 2 3 4 | //変更前 <img src="/img/zzz.png"> //変更後 <img src="<?php echo get_template_directory_uri(); ?>/img/zzz.png"> |
bootstrapファイル記載の変更
1 2 3 4 | //変更前 <script src="bootstrap/js/bootstrap.min.js"></script> //変更後 <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></script> |
bootstrapが反応しない場合
jQueryが反応しない場合
3.style.cssにファイル名を記載
1 2 3 | /* Theme Name: sample1 */ |
header.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> //割愛 <?php wp_head(); ?> </head> <body> <div class="inner"> <header> //割愛 </header> |
footer.php
1 2 3 4 5 6 7 8 | <footer> //割愛 </footer> <script src="script.js"></script> </div> <?php wp_footer(); ?> </body> </html> |
index.php
1 2 3 4 | <?php get_header(); ?> <!-- main --> //割愛 <?php get_footer(); ?> |
index.phpやpage.php(固定ページ)、single.php(投稿ページ)などに記載してください。
header.phpを呼び出したい場合
1 | <?php get_header(); ?> |
footer.phpを呼び出したい場合
1 | <?php get_footer(); ?> |
sidebar.phpを呼び出したい場合
1 | <?php get_sidebar(); ?> |
6.投稿ページ(記事ページ)を生成するテンプレートを作成
これで投稿ページ作成画面からこのテンプレートを選ぶことで内容を表示できます。
single.php(投稿ページ)
1 2 3 4 5 6 7 8 | <?php get_header(); ?> <div class="container"> <div class="contents"> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> |
7.固定ページを生成するテンプレートを作成
これで固定ページ作成画面からこのテンプレートを選ぶことで内容を表示できます。
page.php(固定ページ)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php /* Template Name: 固定ページの新規テンプレート１ */ ?> <?php if(have_posts()): while(have_posts()): the_post();?> //固定ページのタイトルを表示 <?php the_title(); ?> //必要なければ消去してください <h1>お問い合わせありがとうございました。</h1> //固定ページの中身を表示 <?php the_content(); ?> <?php endwhile; endif; ?> |
詳細は以下の記事を参照ください。
8.wordpressナビをつける(おまけ)
こちらをつけるとワンクリックで編集ができるようになるのでつけましょう。
1 2 3 4 5 6 7 | //</head>の前に追加(header.phpに追加) <?php wp_head(); ?> </head> //</body>の前に追加(footer.phpに追加) <?php wp_footer(); ?> </body> |
9.フォルダをzipファイル化してwordpressのテーマにupload&有効化する
以上で完了です。
