Amazon

Rakuten

Twitter@告知用

Twitter@日常用

Facebook

Instagram

blogCircle

Blog ranking

Blog ranking

Calendar

2018年5月
« 4月   6月 »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Archive

Category

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

新しくワードプレスを設置しました!

 

こちらです
http://naon56.xsrv.jp/

 

せっかくなので、自作テンプレートの作成方法をざっくりと紹介します。

 

 

WordPressのインストール

  • サーバーパネルにログインする
  • 「ホームページ」の「自動インストール」をクリックする
  • インストールするドメイン名を選択する
  • 「プログラムのインストール」をクリックする
  • 「WordPress日本語版」の「インストール設定」をクリックする
  • 必要事項を入力する
  • 「インストール(確認)」 をクリックする

 

テンプレートの自作

ソースコードは以下に置いてあります。

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から呼び出します。

 

javascript.jsを作成します。ページのトップに戻る処理です。

 

style.cssを作成します。自分の好みの外見に整えます。

 

作成が終わったら

screenshot.pngというファイルを用意します。これはWordPressのテーマ選択時に表示される画像です。とりあえず仮でOK。後で差し替えましょう。

 

サーバの「wp-content」>「theme」に作成したテンプレートをフォルダごと転送します。

 

WordPressの設定

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

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

 

ブログぺージを追加する

ブログページにしたい固定ページを作成します。本文は空欄でOKです。

WordPressのダッシュボードで、「設定」>「表示設定」から、「ホームぺージの表示」の「固定ページ」を選択して、投稿ページを先ほど作成したページにします。

 

パーマリンクの設定

WordPressのダッシュボードで、「設定」>「パーマリンク設定」から設定できます。

私は「カスタム設定」で

にしています。

 

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の設定をします。
https://www.xserver.ne.jp/manual/man_server_ssl.php

 

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

 

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

 

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

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

の直後に

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

 

プラグインの追加

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

 

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

 

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

 

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

 

ウィジェットの追加

好きなウィジェットを追加します。

 

今回はウィジェットエリアにSNSへのリンクを作りました。

テキストウィジェットにショートコードで呼び出しできるようにしました(別記事にて紹介)。

 

翻訳ファイルの追加

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

自作WordPressテーマの国際化(翻訳)の方法
https://welcustom.net/internationalize-wordpress-theme/

 

関連

エックスサーバーにWordPressを設置しました。
http://naon56.com/blog/2018-01-24-607

WordPresを設置して、テンプレートを自作してみました。
http://naon56.com/blog/2017-09-16-526

 

参考

固定ページをトップページに指定する方法
https://wp-exp.com/blog/page-top/

フロントページを固定ページに設定しつつ、最新の投稿ページも使いたい!
http://wp.myafi.net/blog/

 


広告


Twitterやっています。ぜひチェックしてみてください。

ブログランキングに参加してます。よろしければポチっとお願いします。
ブログランキング・にほんブログ村へにほんブログ村
人気ブログランキング

Leave a Reply

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Theme created by Nao N. / Powered by WordPress

Go to the top Go to top