真っ白なキャンパスに1から作りたい人向けWordPress(1)立ち上げ-CSSリセット

2022.02.08

タイトル画像
ホームページを立ち上げる時、まず何をしたらいいんだっけ…？
と手順をド忘れしてしまう私。

なので、今回の立ち上げの過程を備忘録として書いておこうと思います。
合ってるか自信ないですので、皆さんからのツッコミお待ちしてます。

作りたいサイトはこんな感じ

テンプレートを可能な限り自作して、
なるべくCSSやHTMLを手書きしながら、
投稿記事の取得や、条件分岐などのデータベースとしてのWordpressの恩恵も受けたいややこしい人です笑

真っ白なキャンパスに１からホームページは作りたいけど、
wordpressの恩恵も受けたい方にお勧めの方法です。
(時間はかかるけど、なんだかんだ一番勉強になりそう…。)

1.ドメインの取得、ドメインとサーバーの連携

ドメインを取得して、サーバーと連携。
サーバー指定のネームサーバーをドメインに指定するとつながるイメージです。
私の場合、ドメインはお名前.com・サーバーはロリポップ！なので
ロリポップ指定のネームサーバーを、お名前.comのドメイン詳細画面のネームサーバー情報を変更して指定します。

2.WordPressのダウンロード

WordPressを公式サイトからダウンロード。
自分のパソコンの、自分にとってわかりやすいディレクトリに保存する。
私は、Dropboxの中にwebってフォルダを作ってその中に「poswan_com」というフォルダを作ってその中に解凍しました。
（どこでもええ。）

3.サーバーでデータベースを作成

データベースって、これから作るサイトのさまざまなデータが格納される最強の場所なんですけど、それをサーバーに作ります。
1サイトに1データベースが必要で、ロリポップ!の場合、スタンダードプラン(月４４０円)で50個作れます。
作ると、この後WordPressと接続するのに必要なデータベース名やらユーザー名が分かります。

4.ローカルデータをFTPソフトで全部サーバーにアップロード

さっき、自分のパソコンにダウンロードしたWordPressデータをサーバーに送り込むソフトをFTPソフトと言います。
私はAdobe税を支払ってますので、Dreamweaverというソフトを使っていますが、無料ソフトも多くあり、Google Choromeなどブラウザプラグインもあるので合っている物を探しましょう。
一度FTPでつなぐと、今後はファイルの送受信が出来るのでローカルで作業しオンラインに送り込むを永遠に繰り返します。
サーバーと、FTPソフトの接続に必要なFTPアドレスやらユーザー名やパスワードはサーバーのアカウント情報などで調べられます。

5.サイトURL/wp-admin/にアクセスしてWordPressとサーバーを接続

初回アクセス時に、先ほど作ったサーバーのデータベースと接続する為に色々聞かれるので答えます。
ロリポップ!では、先ほどデータベースを作った画面に一覧になって表示されています。

WordPressの管理画面にようやく辿り着けます！

6.プラグインのインストール

WordPressはサイトを作る上で便利になるプラグインが大量にあります。
個人的にプラグイン任せでカスタマイズが出来なくなると嫌なので、CSSなどに干渉しなさそうなものを、最低限入れていきます。
今後増えていくとは思いますが、私にとって絶対必要なプラグインは以下の４つ。多分全部王道、きっと。

私の思うプラグイン四天王

Contact Form7
フォームを作って、メールを送信するプラグイン。CSSでデザイン自由自在。

Classic Editor
WordPressの直感的な投稿画面をHTML入力の旧式画面に戻すプラグイン。

All in OneSEOPack
メタスクリプションなどの検索された時の見栄えなどを設定するプラグイン。Twitterなどにリンクが貼られた時の見た目などのカスタマイズ機能が神。

show current template
今編集中のページがどのディレクトリにあって、どのCSSが適用されて、どのテーマで…が分かるプラグイン。

プラグインはWordPressの管理画面左の「プラグイン」→「新規追加」で増やしていけます。
インストールしたのち、有効化ボタンを押して使えるようになります。
サイトの挙動が悪い時、プラグインを無効化して原因を突き止めたりします。

7.テンプレートの作成

Dreamweaverで、「wp-content/themes」に新フォルダ「好きな名前のフォルダ」を作って、その中に以下の4つのファイルを作ってアップロード。　
ひとまず中には何も書かなくてよし。

・index.php
・header.php
・footer.php
・function.php
・style.css

これをするだけで、WordPressにプリインストールされているテンプレートと肩を並べて自分のデザインを爆誕させることができます。

8.自分で作ったデザインの適用

先ほど作った好きな名前のフォルダがデザイン名として選べます。
選んで適用した途端、
何も書いていないindex.phpが表示されるのでご自身のサイトは真っ白になっているかと思います。

9.header.php、index.php、footer.php(トップページに表示される)の編集

wordpressのダッシュボードの外観→テーマに移動すると、さっき作ったフォルダ名のテーマが出来ているので、適用する。
〜ところ。って書いているやつは、書かないでくださいませ。headerのフォントとか〜の所は描いちゃダメな気がします。

header.php

<!DOCTYPE html>
<html>
<head>
  <?php wp_head(); ?>
フォントとかCSSとか読みこむところ(本当はfunction.phpで読み込むらしいけどなだよく分からない。)
</head>
<body>
<header>
ヘッダーになるところ
</header>

index.php

<?php get_header(); ?>
メインコンテンツになるところ
<?php get_footer(); ?>

footer.php

<footer>
フッターになるところ
</footer>
<?php wp_footer(); ?>
</body>
</html>

10.CSSと、リセットCSSの読み込み

ブラウザに元々設定されたCSSと、Wordpressが独自に設定しているCSSを解除する為、
「wp-content/themes」に
①style.css(空のファイル)
②destyle.css(ネット上からダウンロード。全てのcssをリセット。cssのリセットのプリセットはいくつもあるけど、全部オフしてくれるのはこの子らしい。全部同じ文字サイズになるので、マジで１からデザインできます。)
GitHub
※cssファイルは別階層に置く説あるんですけど、とりあえず同じ階層に召喚。

常時SSL化する。

22.02.11に追記しました。
SSL化も絶対しなきゃですよね？！忘れてた…
新しく記事書いたのでリンクしておきます。
SSLがよく分からないのでフワッと勉強してみたので共有するね。

最後に

手順が合っていたら、メモ帳もビックリのまっさらなサイトが表示されます。
ここから、CSSとHTMLをいじくり回してデザインを作っていきます。

真っ白なキャンパスにサイトを作り込んでいきたい私たちにオススメです！

まだまだ、作り込み途中ですが、この記事もこの手順で作ってます。

TOP

ぽすわん