WordPressサイト作成チュートリアル⑥作成練習用のサイト
886 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
前回まででWordPressサイトを作るチュートリアルが終わったのですが今回はコーディングデータを基にサイトを作るための練習です。
完成形が数がく部というサイトです。
一般的な個人のブログサイトならこれだけの内容があれば大丈夫だろうと考えて作っているので結構シンプルです。
SEO的に酷いコードにはなってなくこれで十分引っかかると思います。
クラス名は私なりのFLOCSSとBEMを使っていますが無視してもらっても大丈夫です。
チュートリアルとほとんど同じ実装内容ですが一部違いますのでそれは調べてください、難しくないと思います。（難しく感じたらすいません）
注意事項として普通はMAMPやXAMPPなどでコーディングしつつテンプレートを作っていきますがコーディングだけしてテンプレートにすると勝手にクラス名が付く場合があります。（勝手にクラス名がつく物は決まっています）
その場合はクラスに対して新たにスタイルを当てないといけないのですがあえてスタイルはそのままにしています。
ですので画面崩れではなく変なスタイルになっていたらCSSかSCSSの調節をしてください。
どうスタイルを当てるのかが分からなくなったら数がく部をデベロッパーツールで見てすタイルを調べてください。
実装内容の指示がないとわからないと思う部分のみこの記事で指示します。
チュートリアルみたいな実装内容は実務ではしないはずですが（私はしていません）なるべく実務に繋がる（私なりの）指示内容にします。
目次
コーディングデータのダウンロード
まずは↓からコーディングデータをダウンロードしてください。
サイト作成練習用のデータ (0 ダウンロード )それでは指示です。
トップページのヘッダーの指示
ヘッダー部分はチュートリアルはグローバルメニューを作っていましたがグローバルメニューは使わずコードで書いてください。
普通のHTMLのコーディングと同じです。
実務でグローバルメニューを使う会社はまずないと思います。
「プロフィール」と「お問合せ」ですがリンクを自分でつけてください、リンクの付け方は調べれば簡単にわかると思います。
「数がく部」と書いてある部分はお好きな名前にしてください。
トップページ（index.html）の記事部分の指示
これはチュートリアルと同じにしています。
トップページのフッターの指示
「プライバシーポリシー」の部分は固定ページでプライバシーポリシーの記事を作ってリンクにしてください。
「©︎2019〜数がく部」と書いてある部分はお好きな名前にしてください。
投稿ページ（single.html）の指示
サイドバーにタグの一覧がありますがチュートリアルと同じ方法ではできないので別のやり方で実装してください。
「wordpress タグの表示」みたいな感じで調べればわかると思います。
それとチュートリアルでサイドバーにウィジェットを使う解説をしていますが使わないで全て記述にしてください。
この記事がこれからWordPressサイトを作る人にとっての参考になれば幸いです。