PRE PAGE
HOME > WordPress > WordPressテーマを作る練習用の無料コーディングデータ
2022年05月18日

WordPressテーマを作る練習用の無料コーディングデータ

このサイトにWordPressテーマを作るためのチュートリアルの記事がありますがそれで勉強をした人用のテーマ作成のためのコーディングデータができたので無料配布します。

WordPressテーマを作るための無料チュートリアルの記事は↓です。

完成形が数がく部というサイトです。

一般的な個人のブログサイトならこれだけの内容があれば大丈夫だろうと考えて作っているので結構シンプルです。

SEO的に酷いコードにはなってなくこれで十分引っかかると思います。

クラス名は私なりのFLOCSSとBEMを使っていますが無視してもらっても大丈夫です。

チュートリアルとほとんど同じ実装内容ですが一部違いますのでそれは調べてください、難しくないと思います。(難しく感じたらすいません)

注意事項として普通はMAMPやXAMPPなどでコーディングしつつテンプレートを作っていきますがコーディングだけしてテンプレートにすると勝手にクラス名が付く場合があります。(勝手にクラス名がつく物は決まっています)

その場合はクラスに対して新たにスタイルを当てないといけないのですがあえてスタイルはそのままにしています。

ですので画面崩れではなく変なスタイルになっていたらCSSかSCSSの調節をしてください。

どうスタイルを当てるのかが分からなくなったら数がく部をデベロッパーツールで見てすタイルを調べてください。

実装内容の指示がないとわからないと思う部分のみこの記事で指示します。

チュートリアルみたいな実装内容は実務ではしないはずですが(私はしていません)なるべく実務に繋がる(私なりの)指示内容にします。

 

 

コーディングデータのダウンロード

まずは↓からコーディングデータをダウンロードしてください。

数がく部のテーマのデータ (0 ダウンロード)

それでは指示です。

 

 

トップページのヘッダーの指示

トップページのヘッダー

ヘッダー部分はチュートリアルはグローバルメニューを作っていましたがグローバルメニューは使わずコードで書いてください。

普通のHTMLのコーディングと同じです。

実務でグローバルメニューを使う会社はまずないと思います。

「プロフィール」と「お問合せ」ですがリンクを自分でつけてください、リンクの付け方は調べれば簡単にわかると思います。

「数がく部」と書いてある部分はお好きな名前にしてください。

 

 

トップページ(index.html)の記事部分の指示

これはチュートリアルと同じにしています。

 

 

トップページのフッターの指示

トップページのフッターの指示

「プライバシーポリシー」の部分は固定ページでプライバシーポリシーの記事を作ってリンクにしてください。

「©︎2019〜数がく部」と書いてある部分はお好きな名前にしてください。

 

 

投稿ページ(single.html)の指示

サイドバーにタグの一覧がありますがチュートリアルと同じ方法ではできないので別のやり方で実装してください。

「wordpress タグの表示」みたいな感じで調べればわかると思います。

それとチュートリアルでサイドバーにウィジェットを使う解説をしていますが使わないで全て記述にしてください。

この記事がこれからWordPressサイトを作る人にとっての参考になれば幸いです。

●いいねをつけてもらえると励みになります。