wordpressの模写サイトおすすめをレベル別に紹介!最低限マスターすべきは?

wordpressの模写サイトでおすすめをレベル別に集めました。

よくあるパターンのサイトを作るのに最低限、練習しておくべきものを初心者向けに紹介します。

「wordpressの模写」とは、細かな見た目よりも「wordpressの機能が見本サイト通りに動く」ことを主眼において説明します。

 

wordpressの模写サイト作る前に

まずは、wordpressのローカル環境を作りましょう。

ローカル環境を作れば、サーバーやドメイン費用が不要なので、お金をかけずに無料でwordpressサイトを作ることができます。

以下の記事でざっくり説明していますが、Local by flywheelという無料アプリを使うのがおすすめ。

以下の動画で、Local by flywheelのインストールから、ローカル環境のサイトを作るところまで約5分で説明しています。

wprdpressでローカル環境を構築したら、実際にwordpressで模写サイトを作成しましょう。

 

wordpressの模写サイトおすすめレベル1

まずはレベル1で、wordpressのファイル構造をよく知るためのトレーニングをしましょう。

レベル1は、isaraのLPを模写したものをwordpress化をしてみましょう。

 

wordpressの模写サイト1の注意点

isaraの模写は界隈で有名なので、既に作成経験のある人は、過去に作成したものをそのままwordpress化すればOK。

isaraのLPを模写をしたことがない人は、昔既に行った他のLPをwordpress化するでOK。

LPをwordpress化することで、wordpressのファイル構造がよくわかるのでオススメです。

 

wordpressの模写サイト1の方法

HTML、CSSのみで作ったサイトの一部の表記をphpの表記に変えたり、wordpress用にファイルを分けるなどの作業が必要です。

具体的な方法は以下が参考になると思います。

実際に私がフリーランスになる前にコーディングの勉強をしていた頃、isaraのLPをwordpress化するときに、書いた記事です。

wordpressでLPを自作する(LPのwordpress化)最も簡単な方法

 

wordpressの模写サイト1の難しいところ

wordpress化するときに表記を誤って、BootstrapやjQueryにエラーが出たり、画像が表記されない可能性があります。

上の記事や、以下の記事で、それについても解説しているので、参考にどうぞ。

wordpressで変更したhtml、css、php等が反映されない時の対処法【5分】

 

wordpressの模写サイトおすすめレベル2

次にfreeeさんのサイトの「一部」を作るのがオススメ。

 

wordpressの模写サイト2の模写範囲

全て同じように完璧に作るには手間がかかるので、今回は範囲を絞って模写しましょう。

今回はトップページと、投稿ページ(ニュース)固定ページ(サービス)のみを作るだけでOK。

トップページ

トップページの遷移先のページ(リンクを踏んだら飛ぶページ)は「投稿ページ」以外作らなくてOK。

さらにトップページの擬似要素「:after」を使った実装、SERVICEセクションの背景の動画など、「見た目」の難しい部分は飛ばしてOKです。

今回はwordpressの勉強をするための模写なので、細かい見た目にこだわらなくてもOK。

 

投稿ページ(ニュース)

これは、中身のテキストやリンクは適当でOK。

以下は同じような見た目になるようにしましょう。

 

タイトルヘッダー

前後の投稿へ進むボタン

フッター(トップページと同じものです)

固定ページ(サービス)

アニメーションなど、中身のデザインは忠実に再現しなくてOKです。

wordpressの固定ページからの、ページの作り方が分かればOKです。

 

wordpressの模写サイト2の方法

ここからは、freeeさんのサイトの具体的な作成方法を説明します。

既存の無料テーマをカスタマイズする

wordpressの模写サイト1のisaraのサイトとは別で、wordpressの既存の無料テーマをカスタマイズして作ってみましょう。

StingerやLightningがシンプルでカスタマイズしやすい無料テーマと言われています。

ローカル環境でwordpressを設定したら、これらをテーマとしてインストールして、コードを書き換えることでカスタマイズができます。

Stingerの無料ダウンロードのページはこちらです。

stinger8の青いダウンロードボタンを押せば無料テーマをダウンロードできます。(上の画像の矢印部分です)

 

トップページの模写方法

front-page.phpというファイルを作成して、トップページを作りましょう。

 

投稿ページ(ニュース)の模写方法

 

今回はカスタムポスト(CPT UIというプラグインを使う必要がある機能)ではなく、「投稿」で1番簡単に作りましょう。

既に既存テーマを使えば、あらかじめ投稿機能がついているので、それをカスタマイズするという感じです。

single.php(投稿ページ)ファイルを書き換えて作ります(カスタマイズするwordpressテーマのファイル構造によっては、投稿の見た目を変えるのに「single.php」以外の名前のファイルもいじるかもしれないので気をつけてください)

 

固定ページ(サービス)の模写方法

page.phpを編集します。

これは、固定ページ編集にどのファイルをいじれば良いかわかればOK。

 

wordpressの模写サイト2の難しいところ

トップページのNEWS(投稿一覧)を作るのが、初めての人が多いのではないのかな?と思います。

以下の記事を参考にして、front-page.phpに「各投稿」のタイトル、日付、リンクなどを引っ張る機能を追加しましょう。

固定ページに投稿一覧を表示する方法【wordpressコピペOK】

 

wordpressの模写サイトおすすめまとめ

wordpressも模写サイトは、頻出のパターンを練習するのがおすすめです。

ACF(Advanced Custom Field)やCPT UIを使った実装もありますが、今回は最低限よくあるパターンのサイトを作るのに練習しておくべきものを紹介しました!

ちなみに、ここで紹介しているサイトを経験として誰かに見せるなら、必ず「模写したもの」として紹介しましょう。

また、作成したサイトをサーバー上の本番環境に上げると、isaraやfreeeさんに迷惑がかかる可能性があるので、ローカルだけで保存しておきましょう。

 

他にもおすすめの模写方法を知りたい方は以下をどうぞ。

初心者向けLP模写のおすすめのやり方!無駄な練習はコレ

初心者向けの模写は以下をどうぞ。

コーディングの練習模写サイト【頻出のみ40件以上の実務経験から集めた】