新年なのでもう一つサイトを作ってるよ!iPhoneケース・カバー紹介サイトの作成記録 ( その① )

スポンサーリンク

ナメロウです!

新年明けましたおめでとうございます。ことしもよろしくお願いいたします。

新年を迎えましたのでこのタイミングで、もう一つサイトを作ってみたいと思いました。iPhoneケースやカバーの紹介専用のミニサイトみたいな…

今回は、いわゆるサブディレクトリに作っていきます。ですので今回のテーマは、サブディレクトリにもう一つサイトを作るよ!です。

では行ってみましょう!

サブディレクトリに WordPress のインストール

もちろんサーバをレンタルしていますので、いきなりサブディレクトリへの WordPress のインストールからになります。

ナメロウは XSERVERを使用しております。まずは XSERVERのサーバーパネルからスタートです。

まず複数ドメインを運用している場合は、右下の「設定対象ドメイン」が今回サブディレクトリを作成するドメインになっていることを確認します。

確認したら「自動インストール」をクリックする。

タブ「プログラムのインストール」をクリック!

「自動インストール」からWordPress日本語版の「インストール設定」をクリック!

「プログラムのインストール」画面で以下の通り「インストールURL」欄にサブディレクトリ名を、「ブログ名」欄に新たなブログ名を入力します。

そのほか以下の通り入力します。

  • ユーザ名:なんでも良いのですが、オリジナルサイトに合わせた方が利便性が高いかも
  • パスワード:なんでも良いのですが、ちゃんと覚えてしておきましょう
  • メールアドレス:なんでも良いのですが、オリジナルサイトに合わせた方が便利かも
  • データベース:自動でデータベースを生成するにチェックで良いと思います

「インストール(確認)」をクリックしてインストール実行!

確認画面が出ますので内容を確認して「インストール(確定)」をクリック!!

これで WordPress のインストール完了。早速 WordPress の管理画面にログインします。表示されたURLをクリックします。

ユーザー名とパスワードを入力してログインします。

ダッシュボードが表示されました。もうこれで WordPress が動作している状態です!簡単!

 

『エックスサーバー』サーバー無料お試し期間10日!

WordPress テーマのインストール

今回使用するテーマは迷い中なのですが Pinterest 風味のUIが良いかなと思いましたので、さしあたり Pingraphy をインストールすることにします。

WordPressへのインストールはZIPファイルをサイトへFTP転送する方法もありますが、ここでは安直に、WordPress管理画面からインストールしましょう。

左の「外観」より「テーマ」を選択します。

「新規追加」をクリックします。

右がわの検索ボックスに「pinterest」と入力するとテーマ「Pingraphy」が表示されますので、「インストール」をクリックします。

これでインストール完了!簡単ですね。

しかし、ここで「有効化」せずにもう一度「テーマ」に戻ります。

テーマ「Pingraphy」が追加されているのが確認できます。

インストールは完了しましたが、テーマは直接使わずに子テーマを作るのがお作法ですね。

WordPress子テーマの作成!

WordPressの公式ドキュメントを参照して子テーマを作りましょう。

子テーマを作り理由は以下となります。

  • テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
  • 子テーマを使用することで開発時間を短縮できます。
  • 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。

引用:WordPress公式ドキュメント「子テーマ」”なぜ子テーマを使うのか?

以下を参照して XSERVER の自分のサーバーにアクセスしましょう。

5分でできる!MacからXSERVERにSSHで接続しよう!「LOAD TO FREEDOM」私はもう悩まない…

2016.07.16

子テーマディレクトリの作成

スポンサーリンク

子テーマディレクトリは “wp-content/themes” ディレクトリ下に作成します。子テーマディレクトリの名前は、テーマディレクトリ名に ‘-child’ を付けた名称にするのが吉です。こんな感じ。

[foo@bar themes]$ pwd
/****/*****/*****.net/public_html/iphonecase/wp-content/themes
[namero@server themes]$ mkdir pingraphy-child
[namero@server themes]$ ls -l
合計 24
-rw-r--r-- 1 foo bar 6月 6 2014 index.php
drwxr-xr-x 8 foo bar 4096 1月 1 03:45 pingraphy
drwxr-xr-x 2 foo bar 4096 1月 1 04:12 pingraphy-child
drwxr-xr-x 6 foo bar 4096 12月 12 09:24 twentyfifteen
drwxr-xr-x 5 foo bar 4096 12月 12 09:24 twentyseventeen
drwxr-xr-x 5 foo bar 4096 12月 12 09:24 twentyseventeen-child
drwxr-xr-x 7 foo bar 4096 12月 12 09:24 twentysixteen

 

子テーマのスタイルシート (style.css) の作成

子テーマのスタイルシート (style.css) を作成します。まず “style.css” の内容を記載しておきます。

/*
Theme Name: Pingraphy Child
Template: pingraphy 
*/

ここでの注意点は “Template” に親テーマのディレクトリ名を指定すること。”Theme Name” に子テーマの名前を指定しますが任意で構いません。

こんな感じで “style.css” を作りましょう。vi で先ほどの内容を “style.css” に記載します。( コピペでOK )

[namero@server themes]$ vi pingraphy-child/style.css

 

子テーマの “functions.php” の作成

親テーマの “style.css” を読み込ませるために “functions.php” を作成します。記載する内容は以下の通り。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

こんな感じで “functions.php” を作りましょう。vi で先ほどの内容を “functions.php” に記載します。( コピペでOK )

[namero@server themes]$ vi clippy-child/functions.php

そのほか必要に応じてテンプレートファイルの準備がありますが、今回はここまでとしましょう。

WordPress の管理画面をリロードすると作成した子テーマが選択できるようになっています。

 

子テーマの有効化

いよいよ子テーマを有効化して、インストールしたテーマを使って見ましょう。子テーマにマウスを移動して「有効化」をクリック。

管理画面左上の「サイトを表示」を選択。

サイトが表示されました。これでもう公開されています。初期状態ではさすがにそっけない感じですね。これから色々いじっていきます。

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

WordPress を用いてブログを運用する上で欠かせなのがプラグインのインストール。ナメロウは以下のプラグインを使っています。

  • AddQuicktag
  • Advanced Random Posts Widget
  • Akismet ( デフォルト)
  • AmazonJS
  • BackWPup
  • Better Delete Revision
  • Broken Link Checker
  • Contact Form 7
  • Faster Image Insert ユーザーオプション
  • Hello Dolly ( デフォルト)
  • Imsanity
  • Jetpack by WordPress.com
  • Link to Post
  • No Self Pings
  • Post-Plugin Library
  • Search Meter
  • Similar Posts
  • Simple Local Avatars
  • SNS Count Cache
  • SyntaxHighlighter Evolved
  • Table of Contents Plus
  • Throws SPAM Away
  • TinyMCE Advanced
  • WordPress Ping Optimizer
  • WordPress Popular Posts
  • WP External Links
  • WP Hyper Response
  • WP Multibyte Patch ( デフォルト)
  • WP Smush
  • Yoast SEO
  • Categories to Tags Converter
  • Revision Control

以外にたくさん使っていて自分でもびっくり… さしあたり全部インストールしましょう。新たなテーマと合うかどうかは置いておいて。

右側のメニューから「プラグイン」-「新規追加」をクリックします。

インストールするプラグイン名を右側の検索ボックスに入力すると、即プラグインが表示されますので「今すぐインストール」をクリックします。

インストールが完了したら「有効化」をクリックして有効にします。

同様の操作でプラグインをインストールしていきます。全部インストールしたら右のメニューより「プラグイン」-「インストール済みプラグイン」をクリックします。

全てのプラグインのチェックを入れて「一括操作」より「有効化」を選択します。選択したら右の「適用」をクリック。

各プラグインの設定については割愛します。機会があったらそれぞれ紹介しましょう。

WordPress設定

パーマリンク設定

ここではパーマリンク設定についてのみ記載しておきます。そのほかの設定はサイト運用中に変更が可能ですがパーマリンクは設定を間違うと後で厄介なことになります。

パーマリンクとは簡単に言うと各投稿ページごとのステーブルなURLだと思ってください。

後で厄介なことになると書きましたが、サイト運用中にパーマリンク設定を変更すると投稿毎のURLが全て変更されます。そうすると Goolge などにインデックスされ検索結果に表示されたURLをクリックしてもリンク先がなく、404エラーを返却する羽目になります。( ナメロウもしてやられました )

ではどのように設定するのが良いのか?選択するパーマリンク設定は下の図のとおり「投稿名」の一択です。この場合のパーマリンクは、今回作成したサイトの例ですと “http://dotanba.net/iphonecase/” の後ろに記事作成時に指定した「投稿名」が付与されるだけです。

理由の一つは Goolge 先生のおめがねに叶うため。Google Search Console のヘルプページ「シンプルな URL 構造を維持する」に以下のご指示が記載されています。

サイトの URL 構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で(可能な場合は ID ではなく意味のある単語を使用して)URL を構成できるよう、コンテンツを分類します。

引用:Search Console ヘルプ「シンプルな URL 構造を維持する

Goolge 先生に逆らうわけにもまいりません。例えば、デフォルトの設定の「基本」”?p=123″ は何らかの数値がURLに付与されるだけです。これでは人間にとって意味のある単語とは言えません。

よくおすすめの設定として紹介されている「カテゴリ名/記事名※」ですが、これもナメロウ的にはやめといた方が良いです。この設定ではURLだけで記事カテゴリと記事内容を人間が理解しやすく Google 先生の好みであるとの意見も散見されます。

この設定の問題は、カテゴリ構造を後から全く変更できないことです。つまりブログ運用前に将来を見据えたカテゴリ構造を決定する必要があります。もちろん後から変更するとURLが変わってしまい、せっかくインデックスされた記事に、検索サービスからアクセスできなくなってしまいます。( ナメロウはこれにしていて後で変更するハメになった )

※ もし設定する場合は「カスタム構造」を選び入力欄に “/%category%/%postname%/” と入力する

なので、最もシンプルな「投稿名」一択です。

その他の設定・カスタマイズについて

プラグインの設定等割愛しましたが、これでさしあたり記事に投稿できる状態までにはなっています。

だがしかし細かいWordPress の設定やテーマ「Pingraphy」のデザインやカスタマイズが残っていますね。いろいろ書こうと思えばきりがないので、今回はここまでにいたしましょう。

まずはサイトの作成を行ったのちに、次回は気づいたことや、ナメロウが覚えておきたいことを忘備録的に投稿したいと思います。

『エックスサーバー』サーバー無料お試し期間10日!

まとめ!

お正月の三が日がこの作業で潰れそうだ…

まだまだこの先、サイトのカスタマイズ設定をして、さらにiPhoneケースの紹介記事を投稿して… あぁ、まに合わない… ( なにに? )

あ… 今年の抱負をまだ投稿していない… 明日初詣に行かなければ… おみくじを引かねば…

ナメロウでした!

スポンサーリンク

ボタンをクリックして記事をシェア! ¶(⁄•˅̮•∖)⁋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)