コーダー見習い
いろんなデザインのページが沢山あるサイトをワードプレス化するように言われたんだけど
一体どうやればいいんだろう？
デザインが異なる固定ページが複数あるサイトをWordPress化する方法
プログラミングありがとうございます
今回は「カスタムテンプレート」についてご案内致しますね
オペレーター
こんにちは、ヨロと申します。
今回は、デザインの異なる複数の固定ページがあるようなサイトをワードプレス化する方法をまとめてみました。
以前ワードプレス化について書いた記事は、どうにか分かりやすいようにと、
「ドットインストール」の動画を見ながら実際にまとめたもので、
そちらで紹介されているブログ型のサイトのような、比較的簡単な作りのサイトでしたら、
その動画を見て学ぶだけでもある程度のものには対応が出来るようになりますし、
実際に、動画を見て手を動かしながらやり方を教えてもらえるので、とても分かりやすくて簡単で素晴らしいです。
ただ、そこからの応用となると、これがやはりなかなか難しい。
ドットインストールでは、デザインの異なる固定ページが多くあるような中小企業のサイトをワードプレス化する方法には触れてはいないので、
初心者の方々はこれまたインターネットでいろんなサイトを訪問し、自分なりに勉強していかなくてはいけないという。
今回は「カスタムテンプレート」の内容をまとめるにあたり、いろいろな説明が分かりやすそうなサイトを見てたのですが、
「はにわまん」さんのサイトの「歯医者さんのホームページ」が分かりやすくていいなと思い、それらを元にファイルを分割してみました。
ただ正直そのサイトを見ながら進めてみてもやっぱり自分にはちょっと内容が分かり辛かったため、
今回は自分的にももっと分かりやすく、他人にも伝わりやすくという事で、再度このブログ用にまとめて記事にしてみました。
初心者の方にとってはこの「カスタムテンプレート」という用語が分かっただけでもかなりいい内容だったのでは？とも思います。
そうすればどうやってGoogleで検索をかけていけばいいかが分かりますからね。
HTMLサイトを → WordPress化する方法、手順
①まずはともあれファイルを用意
今回必要になるファイルは、
これらのファイルを1つのフォルダにまとめておく。
ここでの注意点は「style.css」はCSSフォルダなどには入れずに、他のphpファイルと同じ階層に置くという点。
そうするとこんな感じ。
②「style.css」にヘッダー情報を書き込む
まずは、今回自分で用意したファイルをWordPressのテーマに適用させるため「style.css」にヘッダー情報を書き込みます。
今回は歯医者さんのサイトなので、テーマ名を適当に「歯医者さん」にしてみました。
/* Theme Name: 歯医者さん */
こうする事で、WordPressテーマが実際に適用されるようになります。
③index.phpを用意
「index.html」を新たにコピー(複製)して、ファイル名を「index.php」に変更
そして、今回別で必要となるファイルも新規で作っていく。
ワードプレスのテーマを作る場合に、基本的に毎度必要になるものは、毎度共通で使える部分の、
他にも必要であれば「sidebar.php」なども追加。
この他にも、もし「screenshot.png」という名前の画像が他のPHPファイルと同じフォルダ内にあれば、
「screenshot.png」が、こんな感じで、テーマのイメージとして適用されます。
そして、今回はいくつかデザインの異なった固定ページがあるので、
③で「index.html」をコピーして「index.php」を作ったように、
clinic.html → clinic.php
service.html → service.php
staff.html → staff.php
access.html → access.php
という風にファイル名を変更する。
固定ページにファイル名をつける際の注意点について
通常だと、固定ページのテンプレートには毎度「page.php」が適用されるのですが、
固定ページごとにデザインやレイアウトを変えたい時ってありますよね？
そんなときに使えるのが「カスタムテンプレート」というもの(カスタムテンプレートは「固定ページ」にのみ有効)
固定ページのファイル名は自分が分かりやすければ何でもOK。
もし、固定ページのデザイン、レイアウトが全て同じという事なら「page.php」を1つだけ用意すればOK。
カスタムテンプレート以外にも別のデザインが欲しいという場合は「任意の名前.php」もしくは「page-スラッグ名.php」というファイル名で作ってもOK。
今回僕は、後で管理画面の一覧で見やすくなるように、
clinic.html → page-clinic.php
service.html → page-service.php
staff.html → page-staff.php
access.html → page-access.php
という風にファイル名をつけてみました。
通常は「page-」は省いて、
clinic.php
service.php
staff.php
access.php
でもOK。
ファイル名を変更後、WordPressで確認をしてみると、
という風に表示され、管理画面からも固定ページの編集が出来るようになります。
④「index.php」のファイルを分割していく
「header.php」
「index.php」のヘッダー部分を切り取り「header.php」に貼り付け。
「index.php」の切り取ったヘッダー部分には、
「footer.php」
「index.php」のフッター部分を切り取り「footer.php」に貼り付け、
切り取った部分に、
⑤ファイル全体にCSSが適用されるように「header.php」を修正
「header.php」の、
/* header.php */ <link rel="stylesheet" href="style.css"> の部分を、 ↓ <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> に変更
/* header.php タイトル部分 */
タイトル部分 <title></title>を、
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title> に変更※プラグインの「All in One SEO Pack」を入れる場合は、わざわざここを編集する必要はない。
⑥「functions.php」 メニューバー部分(固定ページ)
固定ページのメニューバー部分は、管理画面から追加や、カスタマイズが出来ると便利なので、
「functions.php」に、
/* functions.php */
<?php
add_theme_support('menus');を追加。
そして、「header.php」のメニュー部分を切り取り(「ul」から「li」部分)
/* header.phpのメニュー部分 */ <ul> <li><a href="access.html">アクセス</a></li> <li><a href="clinic.html">医院紹介</a></li> <li><a href="index.html">トップページ</a></li> <li><a href="service.html">診療案内</a></li> <li><a href="staff.html">院長・スタッフ紹介</a></li> </ul>
切り取った部分に、
/* header.php */ <?php wp_nav_menu(); ?>
そして「header.php」に、
/* header.php */ <?php wp_head(); ?> ※書く場所は必ずの手前
を必ず追加(これらがないと動かないプラグインが出てくる場合がある)
⑦「index.php(新規記事一覧部分)」
新着情報の日付部分(2012年08月01日)を
/* 日付部分 */ <?php echo get_the_date(); ?> に変更
ですので、今回の僕の場合だと、
/* 日付の部分 */ <div class="date">2012年08月01日</div> ↓ <div class="date"><?php echo get_the_date(); ?></div>
そして、次に
/* 記事部分 */ <a href="#">【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</a> の部分は、 リンク部分には <?php the_permalink(); ?>"> 文章部分には <?php the_title(); ?> ここにもし、本文の抜粋部分を表示させたい場合は <?php the_excerpt(); ?>
抜粋文の文字数を調整したい場合
「functions.php」に以下を記載。
/* functions.php */
function my_excerpt_length($length) {
return 40; // ここで文字数を調整(この場合は40文字)
}
add_filter('excerpt_length', 'my_excerpt_length');/* 記事部分 */ <a href="#">【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</a> ↓ <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
⑧「footer.php」
「footer.php」の
Copyright 2018 Dental Clinic CO.,LTD All Rights Reserved. の2018の部分を
/* footer.php */
<?php if (date("Y")!=2018) echo date("Y"); ?>に変えれば、年が変わると同時に自動的にここも変わるようになる。
そして、BODYの閉じタグの手前に必ず、
/* bodyの閉じタグの手前 */ <?php wp_footer(); ?> を追加。
/* footer.php */ <?php wp_footer(); ?> </body> </html> ※ これがないとフッターが表示されなかったり、動かないプラグインが出てきたりする
そして、ロゴの画像部分には、
/* ロゴ画像部分 */
<a href="<?php echo home_url('/'); ?>"><img src="画像のURL" /></a>⑨メニューバー部分
今のままだとメニューバーの部分(固定ページ)が「サンプルページ」の1つのみなので、それぞれの固定ページを作り、
会社によっては、固定ページごとのデザインが異なる事もあるため、それぞれのデザインに沿ったテンプレートを割り当てる必要がある。
今回は、5つの固定ページが必要
固定ページの作成はWordPress管理画面の「固定ページ」→「新規追加」から追加。
それぞれの固定ページのテンプレートのヘッダー、メニュー、フッター部分も「index.php」同様に変更。
/* それぞれのテンプレートを編集 */ ヘッダー部分は <?php get_header(); ?> で置き換え メニューバー部分は <?php wp_nav_menu(); ?> フッター部分は <?php get_footer(); ?>
⑩独自のデザインのページ(テンプレート)を、それぞれの固定ページに割り当てる方法
トップページ – index.php
医院紹介 – page-clinic.php
診療案内 – page-service.php
院長・スタッフ紹介 – page-staff.php
アクセス – page-access.php
テンプレートをそれぞれの固定ページに適用させる場合、それぞれのPHPファイルの先頭に、
/* テンプレートファイルに名前をつける */ <!-- Template Name: 医院紹介(自分で分かりやすい名前をつける) -->
を追加した後に、「固定ページ一覧」→「編集」→「ページ属性」→「テンプレート」で割り当てる
※テンプレートの名前をそれぞれファイルに追加しておかないと「ページ属性」にテンプレートの項目が表示されない。
※通常「デフォルトテンプレート」には「page.php」が割り当てられる。
⑪固定ページのURLを変更(必須ではない)
今のままだと固定ページのURLがWordPress側で勝手に決められたものになっているはずなので、
まずは、「設定」→「パーマリンク設定」→「投稿名」を選択し、編集ページからパーマリンクを変更する。
医院紹介 → http://***.com/clinic
診療案内 → http://***.com/service
院長・スタッフ紹介 → http://***.com/staff
アクセス → http://***.com/access
という感じ。
もしくは、はにわまん先生の言うように、プラグイン「Custom Permalinks」を使ってパーマリンクを変更するという方法もあるが、404エラーが表示され、ページが開けなくなることもある。
個人的には、むやみやたらとプラグインは入れたくないので、自分でパーマリンクを変更しています。
(プラグインを入れる事でページの表示が遅くなったり、エラーが出たりすると面倒。)
⑫※トップページをクリックした際に、固定ページではなくきちんとトップページに戻る設定方法
今の状態だとトップページをクリックした際に「トップページ」という「固定ページ」に飛ばされてしまうため、
メニューバーのURL設定を変更、
「外観」→「メニュー」カスタムリンクのURLを直接入力。
メニューバーの順番を入れ変える(並べ替える)場合も、ここでドラッグ&ドロップをする事で設定が可能。
最後にまとめ
今回の手順を簡単にまとめると、
全ての設定が終わったら、SEO対策のために、プラグインの「All in One SEO Pack」を入れておくといいでしょう。
そして、はにわまんさんの言う通り、最後に「Screaming Frog SEO Spider Tool」でURL構造と、リンク切れがないかをチェックして終わり。
今回の内容に関しては「ドットインストール」の動画を見ながらある程度の勉強をしておけば、すぐに対応が出来るものになるでしょう
、
それに加えて「Progate」などでPHPの基礎部分を学んでおくと「ドットインストール」の内容の理解がより深まります。
おすすめです。
コメント