64-bit)MAMP:4.0.1Atom:1.27.2SEOに重要なタイトルタグとディスクリプションをします。タイトルタグとディスクリプションの変更タイトルタグの変更header.phpにwordpressが自動で認識してもらえるようにタグを入れ替えていきます。atomでheader.phpを開いて13行目のにある<title>あなたのサイト名などお書きください</title>を削除して以下のコードを挿入します。次に、サイト説明が反映されるように22行目にある<p>サイトの説明文やキーワードを入れてください。SEO対策にもなります。?></p>次にサイトタイトルとページ名が併記されるようにfunction.phpに以下のコードを追記します。);※この場合headar.phpのタイトルタグは削除します。?></title>を削除して保存しましょうサイトを確認すると以下のようにwordpressで設定したサイト名とディスクリプションが表示されます。パングズリストの対応index.php内をみると以下のようにパンクズリストがループの外にあります。下層ページ全般に使える以下のタグを使用します。?>それでは、index.phpの4行目にあるサンプルページを削除して上記のタグを挿入して保存します。サンプルページサイトを更新して確認すると以下のようにぱんグスリストが正常に表示されいるのがわかると思います。新着情報の実装まず、WordPressの管理画面の投稿記事から以下のように新規作成で何記事か作成してください。次に設定→表示設定の1投稿ページ・・新着情報21ページに表示する最大投稿数・・・4件3変更ほ保存します。すると新着情報をクリックすると以下のように表示されるようになります。19行目くらいにあるのインデックスページに戻るの直前に以下のタグを入れたいと思います。?></p>タグ挿入後以下のサンプル画像のようになります。64-bit)MAMP:4.0.1Atom:1.27.2今回は、オリジナルのテーマにウィジェットとカスタムメニューを対応させていきます。functions.phpは最初から最後までphpファイルになりますので1.functions.phpに開始タグと終了タグを記述します。//ここは機能追加する内容を追記するエリアです。?>1234567<?php//ここは機能追加する内容を追記するエリアです。'サイドバーに表示されるウィジェットをここに追加してください。'サイドバーに表示されるウィジェットをここに追加してください。);参考に、私は以下のように記述しました。'サイドバーに表示されるウィジェットをここに追加してください。'サイドバーに表示されるウィジェットをここに追加してください。?)>挿入後の画像は以下の通りです。(18行目です)WordPressの管理画面から外観にポインタをあてるとウィジェットを選択でるようになっていますので確認してくださいね。カスタムメニューに対応させる1.functions.phpに以下のコードを追加します。今回はフッターにメニューを追記するのでメニュー名はfooterのみでいいのですが、今後のことを考えて今回は、全て記述します。'フッター',));先ほどfunctions.phpに記述しましたので、以下のように記述します。2.footer.phpに以下のコードを追記するそれでは、以下のコードをfooterに追記します。'%3$s',//<ul>を出力しない));?>次にwordpressの管理画面の外観から→メニューを選択しメニュー名にplace_footerと入力しメニューを作成ボタンをクリックします。次にメニュー構造のメニュー設定でフッターにチェックを入れて、メニューを保存します。すると位置管理のタブができるので、位置管理をクリックします。次に位置の管理タブの中のフッターからplace_footerをクリックして変更を保存します。フッターに表示させたいメニューを選択してメニューに追加します。するとメニュー構造の中に追加したメニユーが表示されますので、表示したい順番などドラッグ&ドロップで変更して保存してください。64-bit)MAMP:4.0.1Atom:1.27.2WordPress必須タグを挿入するwordpressのテンプレートを作成するときに必ず入れないといけないとされている必須のタグが3つあります。特定のテンプレートやページだけにスタイルを適応することができます。body_classは、他にもページの情報を確認したい時にも役に立つタグです。bodyタグはhtmlが記述してある<body>タグ中に挿入するタグです。.home(セレクタ名){(このペーシだけのルール)}上記のような感じでCSSを反映させることができます。header.phpの</head>タグを編集する<head>と<footer>はwordpressのコアやプラグインと密接な関係があり、ある特定のcssファイルやjsファイルを読み込むのに使ったり、何かの動作をするのタイミングとして使われたり、メタタグを吐き出すのに使われていますので<head><footer>がなければwordpressはうまく動作されないといわれてます。挿入しましょう挿入後は以下の画像のようになります。以下のように<body>~</body>の間に入れて保存してみましょう。すると以下のようにwordpressの管理バーがでてきて、wordpressらしくなりましたね。ループ処理wordpressの記事の全てはデータベースに保存されていて、テンプレート内ではデーターベースから読み込まれた記事を展開してから出力します。その際データベースから記事を取得するのがループ処理です。index.phpなどほとんどのテンプレートに必要です。if?>index.phpにループを記述するそれでは、index.phpにループ処理を記述をしましょう。Atomを開いてindex.phpを開きましょう!まずindex.php内のhtmlを探します。if?>を挿入します。挿入後のサンプルは以下の通りです。次にhtmlタグをテンプレートタグに置き換えていきます。テンプレートタグのコードはこちらを参考にしてください。<h2>製作者より</h2>のところはタイトルになりますので以下のように書き換えます。?></h2>次に11行目の<h3>から19行目の</p>タグまでは記事の中のマークアップになりますので全て削除しwordpress本文を吐き出すテンプレートタグに書き換えます。タグは以下のタグです。?>それでは、保存してリロードして見てみましょう!!以下の画像のように新着情報・サービス・アクセスなどをクリックしたときに始めの段階で、ダミーの内容で記入した文字が出力されていればOKです。次回は、ウィジェットとカスタムメニューに対応させていきたいと思います。/js/main.js上記のようになっているファイルをhttp://〇〇.com/wp-content/themes/mytheme/img/〇〇.gifのようにフルパスに記述し直さないと表示されないので、赤文字の部分を吐き出すために以下のようなwordpressのコマンドを使います。)は含まれませんので必要に応じで補う必要があります。)を含めて入力します。挿入後は以下の通りです。※線で囲むと文字が見えづらくなるので今回は枠で囲っていません。