エックスサーバーにWordPressを設置し、自作テーマを作りました。

2018年5月18日WordPressCSS,HTML,JavaScript,ワードプレス

新しくワードプレスを設置しました！
こちらです→　http://naon56.xsrv.jp/
せっかくなので、自作テンプレートの作成方法をざっくりと紹介します。

WordPressのインストール

  1. サーバーパネルにログインする
  2. 「ホームページ」の「自動インストール」をクリックする
  3. インストールするドメイン名を選択する
  4. 「プログラムのインストール」をクリックする
  5. 「WordPress日本語版」の「インストール設定」をクリックする
  6. 必要事項を入力する
  7. 「インストール（確認）」 をクリックする

テンプレートの自作

ソースコードは以下に置いてあります。
https://github.com/naon56/WordPressTemplate/tree/master/my-handmade

デザインはどうするか

デザインを考えます。今回はレスポンシブデザインにしたいので、1カラムにします。今回はトップを固定ページにします。

ソースコードの作成

ソースコードを書いていきます。なるべくファイルを分割した方が、1つ1つのファイルが軽くて管理しやすいです。

  • index.phpを作ります。
  • header.phpを作ります。
  • footer.phpを作ります。
  • single.php（ブログページ部分）を作ります。
  • page.php（固定ページ部分）を作ります。
  • comments.php（コメント部分）を作ります。

functions.phpを作ります。これはウィジェットなどの基本的な処理の集まりとなっています。自分で新規に関数を作ることも可能です。

「copyright_year()」は自作関数です。他の追加した関数は、Googleさんで調べて必要に応じて追加しました。

フッターのウィジェットエリア用のファイルを作って、footer.phpから呼び出します。

<?php  get_template_part('footer_widget');  ?>

javascript.jsを作成します。ページのトップに戻る処理です。
style.cssを作成します。自分の好みの外見に整えます。

作成が終わったら

screenshot.pngというファイルを用意します。これはWordPressのテーマ選択時に表示される画像です。とりあえず仮でOK。後で差し替えましょう。
サーバの「wp-content」＞「theme」に作成したテンプレートをフォルダごと転送します。

WordPressの設定

固定ページをトップページにする

WordPressのダッシュボードで、「設定」＞「表示設定」から、「ホームぺージの表示」の「固定ページ」を選択して、ホームページをトップページにしたいページを選択します。

ブログぺージを追加する

ブログページにしたい固定ページを作成します。本文は空欄でOKです。
WordPressのダッシュボードで、「設定」＞「表示設定」から、「ホームぺージの表示」の「固定ページ」を選択して、投稿ページを先ほど作成したページにします。

パーマリンクの設定

WordPressのダッシュボードで、「設定」＞「パーマリンク設定」から設定できます。
私は「カスタム設定」で

/blog-%year%-%monthnum%-%day%-%post_id%/

にしています。

Ping送信先の設定

ダッシュボードの「設定」＞「投稿設定」＞「更新情報サービス」に、とりあえず以下を設定します。

http://rpc.pingomatic.com/
http://www.blogpeople.net/servlet/weblogUpdates
http://blogsearch.google.co.jp/ping/RPC2
http://blog.goo.ne.jp/XMLRPC
http://ping.blogoon.net/
http://ping.ask.jp/xmlrpc.m
http://www.bloglines.com/ping
http://api.my.yahoo.co.jp/RPC2
http://ping.fc2.com/
http://ping.gpost.info/xmlrpc
http://wpdocs.sourceforge.jp/Update_Service

ディスカッション

ダッシュボードの「設定」＞「ディスカッション」で自分の好みの設定にします。

ニックネームの設定

ダッシュボードの「ユーザー」＞「あなたのプロフィール」から「ニックネーム」と「ブログ上の表示名」を変更します。

HTTPS対応

以下のように無料独自SSLの設定をします。

.htaccessを以下のように書き換えます。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

ダッシュボードの「設定」＞「一般」にある「WordPress アドレス(URL)」「サイトアドレス(URL)」 を「https://～」の形にします。

リビジョンの保存件数の制限

「wp-config.php」に手を加えます。

define('WP_DEBUG', false);

の直後に

/* リビジョンの保存件数を制御する */ define('WP_POST_REVISIONS', 3);

を追記します。これは過去3件まで保存します。

プラグインの追加

既にインストールされているプラグインのうち、「Akismet Anti-Spam (アンチスパム)」「TypeSquare Webfonts for エックスサーバー」「WP Multibyte Patch」を有効化します。

他に、必要なプラグインをインストールします。私のお勧めは以下のものです。

ダウンロードしてから、「wp-content/plugins」の下のディレクトリに解凍してアップロードした方が速いです。

特に「Advanced Custom Fields」と「Breadcrumb NavXT」はテーマのソースコードに利用しているのでインストール必須です。

ウィジェットの追加

好きなウィジェットを追加します。
今回はウィジェットエリアにSNSへのリンクを作りました。
テキストウィジェットにショートコードで呼び出しできるようにしました（別記事にて紹介）。

翻訳ファイルの追加

以下のサイトを参考に設定します。

関連記事

参考記事

2018年5月18日WordPressCSS,HTML,JavaScript,ワードプレス

Posted by ナオ