【WordPress】0→1 WordPressでWebサイトを構築する方法。【初心者必見】
副業で月5万円を目標にするなら、まず取り組むべきが「Wordpress」です。
「Wordpressってどうやって作成するの？」
「どんなデザインにすれば良いんだろう？」
「Wordpress化に組み込むべき内容がわからない」
このように悩んでしまうのは普通のことです。
ゼロからWEB制作を学んだ私自身も、
手探りでWordpressを制作して苦労した経験があります。
この記事では、これから副業を始めたいという人に向けて、
Worsdpressの作成手順をわかりやすくお伝えしていきます。
▼この記事が役に立つ人
✅副業で月5万円を目指している人
✅Wordpressの作り方が分からなくて困っている人
✅手順をポイントごとに解説してほしい人
✅副業で案件を獲得したい人
自分のペースでこの記事を読み進めながら、コツコツと作成していきましょう。
それでは作成スタートです！
▼Wordpress作成の流れ
①デザインの選定
②HTMLでモック作成
③WordPress設置
④WordPressの設定
⑤デザインの編集
⑥スタイル適用時の動作確認
⑦動的に変わる部分をPHP化
⑧SEO対策
それぞれのステップを具体的に解説します。
Wordpressの作成手順①：デザインの選定
ベースとなるサイトのデザインを選定します。
Webサイトにする上で、必ず目的があります。
売上、知名度など様々ですがコンテンツ選びや
見せ方が非常に重要になります。
参考サイトを用いて、ベースデザインを決めます。
①模写するサイトを選ぶ
②特徴的なデザインほど、独自性デザインに流す
③UI/UXに狙いを定めて、CTR率があがる部品に変える
そのままでも十分有効性高いですが、サイトのメインカラーに変えると言った見方です。
参考サイト①「Awwwards」
Awwwardsは、デザイン、創造性、革新性の面で優れたウェブサイトを紹介するサイトです。世界中のデザイナーや開発者が作成した最高のウェブデザインを見ることができ、インスピレーションを得るのに最適です。
参考サイト②「Behance」
Behanceは、アーティストやデザイナーが自身のプロジェクトを共有するためのプラットフォームです。多くのウェブデザイナーが自身の作品を公開しており、最新のトレンドやクリエイティブなアイデアを見つけることができます。
参考サイト③「Dribbble」
Dribbbleは、デザイナーが自身の作業のスニペットを共有するためのコミュニティです。ウェブデザインに限らず、グラフィックデザイン、UI/UXデザインなど幅広いデザインを見ることができます。プロジェクトの初期段階のアイデアや完成品をチェックできます。
参考サイト④「CSS Design Awards」
CSS Design Awardsは、優れたウェブデザインを表彰するサイトです。最新のウェブデザインのトレンドを把握するのに役立ち、プロフェッショナルによって評価された高品質なデザインを確認できます。
参考サイト④「SiteInspire」
SiteInspireは、シンプルで使いやすいインターフェイスで、多数の高品質なウェブサイトを紹介しています。カテゴリー別やスタイル別に検索できるため、特定のニーズに応じたデザインのインスピレーションを得ることができます。
Wordpressの作成手順②：HTMLでモック作成
参考にしているデザインを元に、HTMLページを
作成します。
事前準備にコードエディタである「vscode」の環境を導入しましょう。
vscodeインストール手順の具体的な手順について解説します。
①VSCodeの公式サイトからインストーラーをダウンロードします。
②拡張機能「Japanese Language Pack for Visual Studio Code」をインストールし、日本語化します。
③環境構築に欠かせない下記機能をインストールします。
HTML Snippets: HTMLのスニペットを提供
Live Server: ローカル開発環境でライブリロードをサポート
Prettier: コードフォーマッター
以上で、vscodeの導入は完了です。
HTML作成の具体的な手順を解説します。
①新しいプロジェクトフォルダを作成し、その中にHTMLファイルやCSSファイルを配置します。
②index.htmlに基本的なHTML構造を作成します。
③styles.cssにスタイルシートを作成し、HTMLにスタイルを適用します。
Wordpressの作成手順③：WordPress設置
契約しているレンタルサーバにWordPressを設置します。
レンタルサーバにWordPress設置は下記リンクを参考にしましょう。
XserverでWordPressを設置する方法
Wordpressの作成手順④：WordPressの設定
初期設定で構築されているWordPressの設定を更新します。
設定を変更する箇所は数箇所あるため、1つずつ確認していきましょう。
サイト情報の設定
①WordPress管理画面にログイン
②「設定」→「一般」を選択
③「サイトのタイトル」と「キャッチフレーズ」を設定
④「WordPress アドレス (URL)」と「サイトアドレス (URL)」を確認・設定
パーマリンクの設定
①「設定」→「パーマリンク設定」を選択
②推奨設定として「投稿名」を選択
テーマカスタマイズ
①「外観」→「カスタマイズ」を選択
②サイトのロゴ、色、フォントなどをカスタマイズ
メニューの設定
①「外観」→「メニュー」を選択
②メニューを作成し、ページやカテゴリを追加
⑤-4-3 メニューロケーションを設定
セキュリティ対策
①プラグイン「Wordfence」を有効化
②強力なパスワードを使用し、管理者アカウントのユーザー名を「admin」以外に設定
バックアップ
①プラグイン「UpdraftPlus」を有効化
②バックアップ実施
基本ページの作成
①WordPressのダッシュボードにログイン
②「ページ」→「新規追加」を選択
③ページタイトルに「ホーム」と入力し、必要なコンテンツを追加
④「公開」ボタンをクリックしてページを公開
⑤上記の方法で「お問い合わせ」「プライバシーポリシー」「ブログ」ページを作成
固定ページの作成
①「設定」→「表示設定」を選択
②「ホームページの表示」で「固定ページ」を選択
③「ホームページ」に先ほど作成した「ホーム」を選択
④「変更を保存」ボタンをクリック
⑤上記の方法で、割り当てたい固定ページを編集
問い合わせページの作成
①ダッシュボードで「プラグイン」→「新規追加」を選択
②検索バーに「Contact Form 7」を入力し、インストール後に有効化
③ダッシュボードで「お問い合わせ」→「新規追加」を選択
④フォームをカスタマイズし、「保存」ボタンをクリック
⑤フォームコード（ショートコード）が表示されるのでコピー
Wordpressの作成手順⑤：デザインの編集
追加したページに、モックで作成したHTMLを差し込みます。
追加ページにHTMLを差し込む方法
プラグイン「classic editor」を有効化します。
ページの編集から、HTMLをそのまま張りつけます。
追加ページにCSSを差し込む方法
次にスタイルを適用させます。
作成しているCSSファイルを、WordPress内にアップロードします。
ファイルのアップロード手順
①サーバのコントロールパネルにアクセスします。
②作成しているCSSファイルを、
③style.cssと同じ階層にアップロードします。
function.phpにアップロードしたCSSファイルを読込むようにします。
CSSファイルの読込み手順について
function.phpファイルでCSSを登録すると、自動的にテーマの全ページに適用されます。
<?php
// functions.php
function my_theme_enqueue_styles() {
// デフォルトのstyle.cssを読み込み
wp_enqueue_style('main-style', get_stylesheet_uri());
// カスタムCSSファイルを読み込み
wp_enqueue_style('custom-style', get_template_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>Wordpressの作成手順⑥：スタイル適用時の動作確認
CSSファイルをテーマに適用した後、WordPressサイトにアクセスしてスタイルが正しく適用されているか確認します。
必要に応じてブラウザのキャッシュをクリアして最新のスタイルを確認します。
Wordpressの作成手順⑦：動的に変わる部分をPHP化
WordPressの設定を変更した部分をサイトに反映させる必要があります。
HTMLの定義タグをPHPテンプレートタグに変更します。
Wordpressの作成手順⑧：SEO対策
サイトの可読性と、利便性を向上します。
ここから先は
¥ 500
この記事が気に入ったらサポートをしてみませんか？