とっちゃん@nyanco! です。
今回は静的ページ（HTML）で作られたwebページに部分的にCMS（WordPress）で「お知らせ」を導入する機会があったのでその備忘録です。
今回はWordPressカスタマイズ（独自テーマ作成）編となりますにゃ～
▼【1.WordPressインストール編】はこちらをどうぞ
WordPressをカスタマイズ
今回はWordPressサイトのカスタマイズを施していきます。
独自テーマのフォルダ作成・ファイル作成
まずは独自テーマを作成するため、前回記事でインストールしたWordPressの下記ディレクトリ内に任意の名前のフォルダを作成します。
wp-news > wp-content > themes > 「任意のフォルダ名」
今回は「お知らせ」コンテンツ追加ということで「news」としました。
続いて作成したフォルダ内に、テーマとして最低限必要な下記6つの新規テキストファイルを作成します。
- style.css
- header.php
- footer.php
- functions.php
- index.php
- single.php
拡張子が非表示になっている場合は拡張子の設定ができないので、下記サイト様を参照して拡張子を表示した状態で行ってください。
以下、作成したファイルを編集していきますが、メモ帳以外のテキストエディタ（Mery、Brackets、Sublime Text、Atom：全てフリーソフト）などを使用してください。
style.css の設定
こちらのファイルでテーマ名（半角英数字のみ）を設定していきます。
「管理画面 > 外観 > テーマ」に表示されるテーマ名となりますにゃ〜
/*
Theme Name: テーマ名
*/
記述内容はたった3行だけです。
今回はテーマ名を「news」としました。
header.php の設定
静的ページからヘッダーとなるhtmlコードをコピーペーストします。
基本的にはhtmlの1行目（ <!DOCTYPE html> ）から headerの閉じタグ（ </header> ）までをまるまるコピーペーストとなるかと。
<header>タグを使ってない場合はヘッダーに該当する記述までとなります。
header.phpにペーストした後、cssやJavascript、画像などの参照先や他ページへのリンクをheader.phpから見た相対パス（または絶対パス）に変更しておきます。
相対パスであれば、ディレクトリ構造がデフォルトのままであれば下記のような構造になっているはずなので、1つ上の階層を表す（../）を4つ前につければOKなはずです。
wp-news > wp-content > themes > news
▼こんな感じですね。
<link rel=”stylesheet” href=”../../../../css/common.css”>
ちなみにグローバルメニューに「お知らせ」（自身のリンク）を追加する場合は下記コードでOKです。
<a href="<?php echo home_url(); ?>">お知らせ</a>
footer.php の設定
footer.php にも同じく静的ページからhtmlコードをコピペします。
基本的には footerの開始タグ（ <footer> ）から最終行（ </footer> ）までをコピペします。 タグを使ってない場合はフッターに該当する記述から最後までとなります。
header.php と同様に、ペーストした後は画像の参照先や他ページへのリンクをfooter.phpから見た相対パス（または絶対パス）に変更しておきます。
functions.php の設定
こちらは今回は空白のままでOKです。
index.php の設定
こちらは今回でいうといわゆる「お知らせ一覧ページ」のテンプレートになります。
1行目に <?php get_header() ?> 、最終行に <?php get_footer() ?> としておけば先ほど作成したヘッダー・フッターが読み込まれます。
その間に、デザインやレイアウトは他の静的ページを踏襲しつつ、ループで投稿記事の一覧をどのように出力するかをphpで記述していきます。
記述の仕方などは下記サイト様の記事がとても参考になります。
複数のダミー記事を5、6個ほど作成してから設定するとどのように一覧表示されるかイメージしやすいのでオススメですにゃ〜
single.php の設定
こちらは各投稿記事の詳細ページのテンプレートになります。
index.php と同じく1行目に <?php get_header() ?> 、最終行に <?php get_footer() ?> とし、その間に投稿内容をどのように出力するか記述していきます。
静的ページにもメニューを追加
最後に静的ページのヘッダー（フッター）メニューに、WordPressで作成した「お知らせ一覧ページ」に移動するリンクを追加し相互リンクが確認できれば、一旦は静的ページにCMSで「お知らせ」コンテンツ導入完了です！
おわりに
本記事ではすっ飛ばしましたが、作業的にボリュームがあるのはindex.phpとsingle.phpの作り込みだと思います。
また、グローバルメニューに1つメニューを追加するとバランスが崩れる場合が多いので、CSSで色々と調整が必要となったりと結構時間が取られると想定されるので、まとまった時間を確保してから作業に望むのが良いかと。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント