one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【1：one's way】WordPressでWebサイトを作る〜ドメイン取得から公開まで〜

one's wayプロジェクト Wordpress

f:id:seintoseiya:20150324203011p:plain
プロジェクトの記念すべき1つ目は、Wordpressを使ってプロジェクトサイトの作成！
http://seiyatanaka.com/

これもカウントするのかよ。というツッコミはご勘弁下さい。
最初の環境を作るってところが一番めんどくさかったりします。
サーバ契約したり、Wordpressインストールしたり、ブログ開設したりと・・・

とりあえず、やった事をざざっと列挙していきます。

【開発環境の準備】

ドメインの取得からサーバ上にWordpressのデータをアップロードするまで。

ドメイン取得

ムームードメインでseiyatanaka.comを取得

レンタルサーバ契約

ロリポップのロリポプランで契約

レンタルサーバに独自ドメインの登録

ロリポップの管理画面で取得した独自ドメインを登録

Wordpressをローカルにダウンロード

ブログから大規模サイトまで作れる CMS | WordPress.org 日本語からzipデータをローカルにダウンロード

Wordpressをレンタルサーバにアップロード

解凍したファイルを全てレンタルサーバの独自ドメインディレクトリにアップロード

レンタルサーバにWordpress用のDBを作成

ロリポップの管理画面からDBを作成

レンタルサーバにWordpressをインストール

ブラウザでホームWordpressをアップロードした先（http://seiyatanaka.com/）にアクセスして指示に従ってWordpressをインストール

【Wordpressテーマの編集】

テーマの設定からデザインの編集、公開まで。

テーマ選択・カスタマイズ

Wordpressのダッシュボード左側メニューから[外観-テーマ]を選択し、任意のテーマを選択します。今回使用したのは「Arcade Basic」というテーマです。
後は、[外観-カスタマイズ]からデータの入力及び画像のアップロードをします。

presented by表記を非表示

だいたいのテーマはfooter.phpにpresented by表記があります。
[外観-テーマの編集]からfooter.phpを探し、該当箇所をコメントアウトします。

デフォルト記事の削除、固定ページの作成

インストールしたばかりだと、「投稿」と「固定ページ」にダミー記事が存在します。まずはダッシュボード左側メニューの[投稿]、[固定ページ]からダミー記事を削除。

トップページを固定ページに変更

ほとんどのテーマの場合、トップページに投稿記事が表示されます。今回、私は投稿記事は一切使用せず、固定ページだけの形式にしました。（新しいWebサイトが完成する度にトップの固定ページを編集する。）
まずは、固定ページを作成（「top」、「about」、「contact」）する。
その後、[設定-表示設定]からフロントページの表示を固定ページに設定し、フロントページ: 「top」と選択。

トップページのタイトルを非表示

このままではトップページにもタイトル（「TOP」という表記）が表示されるので、フロントページの場合だけタイトルを表示させない設定が必要です。
この作業はソースコードを編集するので、少し知識が必要ですが、レンタルサーバの該当テーマディレクトリ(/wp-content/themes/arcade-basic/)に移動し、page.phpを開きます。
下記がタイトルを表示している記述です。

<h1 class="entry-title"><?php the_title(); ?></h1>

これを・・・

<?php if(is_front_page()) : ?>
<?php else : ?>
    <h1 class="entry-title"><?php the_title(); ?></h1>
<?php endif ?>

こうすればOK。
phpを読める必要がありますが、簡単な条件分岐なので少し勉強すればわかるかと思います。
ちなみにis_front_page()はwordpressの関数でトップページ（フロントページ）かどうかを調べる関数の様です。

コメント欄を非表示

コメント欄も消したいので、調べてみると[設定-ディスカッション]に消す設定があるとの事。
早速、投稿のデフォルト設定の「新しい投稿へのコメントを許可する 」のチェックを外す。
これでよし。と思ったが消えない・・・既に作成した固定ページや投稿には反映されないとの事。
先にやれば良かったと思いつつ、固定ページの編集から上部の表示オプションをクリックして「ディスカッション」にチェックを入れる。すると画面最下部に設定メニューが出るので「コメントの投稿を許可する。」のチェックを外して完了。

メニューバーの作成

[外観-メニュー]からナビゲーションメニューの作成をする。この際に、「blog」（外部リンク）を追加。

ウィジェットRSSリーダーの配置

[外観-ウィジェット]から不要なウィジェットを消して、RSSを追加。自身のブログのURLに「/rss」を追加してRSSフィードのURLを登録。（例：http://onesway.hatenablog.com/rss）

contact用プラグイン導入

contactページの実装はプラグインを使った。[プラグイン-新規追加]から任意のプラグインをインストールする。
今回、使ったのは日本製で有名な「Contact Form 7」を使用させてもらった。
インストールして、問い合わせ内容を編集した後、生成されるコードをcontact固定ページに貼付けて、おしまい。


以上、ドメイン取得から公開できるまでの設定を記載しました。
だいぶ端折っていますが、「Wordpress入門」など各種キーワードで検索すれば、たくさん情報があります。
Wordpressを使ってWebサイトを作ろうと思っている方のインデックスとして参考にしてもらえればと思います。