WordPressで自社サイトを作る方法を図説します。

当サイトも契約しているレンタルサーバ「JET BOY」の契約方法~ドメインの取得をご紹介します。

当サイトがJET BOYで契約している理由は、安さとサイト高速表示のコスパが業界最高だからです。

企業の基本情報・サービス・新着情報・メンバー紹介・採用案内・お問い合わせページなど10ページ程度で名刺代わりに企業のサイトを持ちたい方にはJET BOY以上のコスパのサーバーはありません。

それでは、参りましょう。

レンタルサーバを契約する

まずは、サーバを契約します。

サーバを契約することでホームぺージを置く場所が手に入ります。

当サイトも利用しているJETBOYというところでレンタルする方法です。

全20ページ程度のホームぺージならミニSSDプランで十分です。(年額3980円)

全100ページ程度のブログコンテンツ型ホームぺージならファーストSSDプランがおすすめ。(年額7710円)

後からアップグレードも可能

サイトの表示速度が遅くなってきたり、同時アクセスが増えてダウンすることがあれば後から上位プランにアップグレードすることも可能です。

※上位プランから下位プランへのダウングレードは出来ません。

レンタルサーバの契約が終われば次に独自ドメインを契約します。

独自ドメインを取得する

独自ドメインを契約することでホームぺージへのリンクが手に入ります。

※サーバとドメインは2つで一つなので両方契約します。

独自ドメインとは

http://xxxxxx.comとか http://xxxxxx.netとか xxxxxxのところに好きな文字列を入れた自分だけのドメインのことです。早い者勝ちなので、思いつきやすい単語は使えないことが多いです。

サブドメインとはどう違う?

http://zzz.xxxxxx.comとか http://zzz.xxxxxx.netとか xxxxxxの前にzzzを入れたドメインのことをサブドメインと呼びます。

一つ独自ドメインを取れば、サブドメインはいくらでも作ることが出来ます。

JETBOYでサーバを借りると、http://zzz.jetboy.jpというサブドメインがいくらでも手に入りますが、企業のホームぺージを他所のサービス名が入ったドメインのサブドメインで運用することは普通しません。

信頼性に欠けますし、ダサいからです。

独自ドメインの契約方法

当サイトも利用している「ムームードメイン」で契約する方法をご紹介します。

ドメインはどこで借りても値段は同じです。管理画面の使いやすさで選びました。

欲しいドメイン名があるか、確認する

「欲しいドメインを入力」と書いてあるところに好きな英数字を入れます。

※http://xxxxxx.com のxxxxxxの部分だけで構いません。

.com.net.jpなど自動検索してくれる

xxxxxxを入力したら、 xxxxxx.com や xxxxxx.net や xxxxxx.jp などを一気に探してくれます。

xxxxxx.com はもう使われてしまっているけれど xxxxxx.net なら残っている場合があるので残っている方かまた別の文字列を選んで契約してください。

.com.net.jpに違いはない

今はドメインの最後の文字列に深い意味はありません。

なのでどれを契約してもOKです。

.jpは若干高いので、.comか.netがおすすめです。(年額1000円程度)

.me.xyz.siteはオススメしません

.meや.xyzなどあまり見ないものは安いですが、企業の信頼性がなんとなく落ちる気がするので使わない方がいいです。使っている企業はほとんどありません。

ムームードメインではドメインだけ契約すればOK

ムームードメイン含め、ドメインレンタル業者は一緒にサーバーやメーリングサービスも行っていることが多いですが、サーバーはJETBOYでレンタルしているのでオプションは付けずにドメインだけ借りればOKです。

独自ドメインの契約が終われば最後に「サーバーとドメインをリンクさせる」という作業に移りましょう。

サーバーとドメインをリンクさせる

今、別々のところでサーバーとドメインを契約したので、これを紐づけます。

まずはJETBOY側でドメイン登録

JETBOYにログインして「ドメイン設定」を行います。

新規ドメイン追加>ムームードメインで契約したドメインを追加します。

次にネームサーバを控えておく

ダッシュボードに戻り「サーバー情報」からネームサーバの欄をコピーする。

※2つとも使います。

最後にムームードメインでネームサーバを登録する

ムームードメインにログインし、ネームサーバ設定変更を行います。

ここでGMOペポバ以外のネームサーバを使用するにチェックを入れ、ネームサーバ①と②にJETBOYのネームサーバを入れて設定を変更します。

お疲れ様でした。以上で独自ドメインとレンタルサーバの契約が完了です。

各ページごとに別々のCSSを適用する方法の一つに、 <body>にページごとに異なるidやclassを付与する方法があります。

WordPressには記事ごとにIDが振り当てられているのでphpでこれを取得すればページごとに異なるidやclassを付与出来ます。

では、参りましょう。

<body>タグに追記

page.php や single.php などの<body>タグに以下のように追記します。

<body id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

the_ID() は現在の投稿の ID を表示します。

カスタムCSSとは各記事一つひとつにCSSを適用させることの出来る機能です。

とても便利な機能なので、作っておきましょう。

では、参りましょう。

functions.phpに追記

//『カスタムCSS』入力フィールドを投稿画面に追加する
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'カスタムCSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'カスタムCSS', 'custom_css_input', 'page', 'normal', 'high');
    add_meta_box('custom_css', __('カスタムCSS', 'custom_css_input'), 'custom_css_input', 'wp-plugin', 'normal', 'high');
}

function custom_css_input() {
    global $post;
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
        endwhile; endif;
        rewind_posts();
    }
}

たったこれだけで、各記事ページにカスタムCSSフィールドを追加することができます。