さくらのVPSでWordPressを動かすメモ1

参考にするサイト

さくらVPSにUbuntuをインストール

OS再インストール

OS再インストールは、マニュアルに沿ってボタン押してればできます。
今回僕は、@hika69の奨めもあり、ubuntuでやりました。

この段階でメモしたコト:
・OSの任意のユーザアカウント
・そのパスワード

参考:サーバOSについて
サーバーOSとは何か?
Wikipedia:サーバ

Wikipedia:Ubuntu

公開鍵と秘密鍵

Mac OS XでSSHの公開鍵と秘密鍵を設定する。を参考に作る。

引用:

  1. ターミナルから ssh-keygen と入力して実行。
    • Enter file in which to save the key (/Users/egyo/.ssh/id_rsa): 保存先の指定、そのままEnter
    • Enter passphrase (empty for no passphrase): 任意のパスフレーズを設定
    • Enter same passphrase again: もう一回入力
  2. Finderからコマンド+シフト+Gで “~/.ssh” と入力して開く。
  3. 同じようにサーバ側のユーザー直下にある.sshを開く。
  4. 手順1で保存したid_rsa.pubをテキストエディタで開き、その内容をサーバ側のauthorized_keysに貼付けます。
  5. UNIXの設定やテキストファイルは最後に改行が必要なので入れる。

ステップ3までは順調にできたが、4のサーバ側で/ユーザ/.sshがなかったので、FTPソフトでSFTP接続で.sshフォルダを作り、id_rsa.pubをその中にアップしてファイル名をauthorized_keysに変更した。
ここは多分、コマンド

mkdir ~/.ssh<br />chmod 700 ~/.ssh<br />cd ./.ssh<br />vi authorized_keys

できたんだと思う。

vimのインストール

sudo apt-get install vim

これやらないと、入力がおかしなことになる。

 

SSHの設定

SSHの設定ファイル。

sudo vi /etc/ssh/sshd_config

詳細は、さくらVPSにUbuntuをインストールで。

ファイヤーウォールの設定

sudo ufw allow 80
sudo ufw allow SSH接続のために開いたポート番号
sudo ufw default deny
sudo ufw enable

これで、他のポートでは接続できないようになる。

apache, php5, mysql, phpmyadminをインストール

sudo apt-get update
sudo apt-get install apache2
sudo apt-get install php5 libapache2-mod-php5
sudo apt-get install mysql-server
sudo apt-get install phpmyadmin

途中、MySQLのroot userのパスワードを作る。
phpMyAdminのインストール中に、その入力を求められる。

/phpmyadmin/などでphpmyadminにアクセスできるようにシンボリックリンクを作る。

sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf.d/phpmyadmin
sudo /etc/init.d/apache2 reload

Apache2の設定

/var/www の設定

sudo chown -R ログインユーザ名:www-data /var/www/
sudo chmod 750 /var/www/
sudo usermod -g www-data ログインユーザ名

/var/wwwのオーナーがrootになっているのをログインユーザに変えておく。

サーバー情報の隠蔽

sudo vi /etc/apache2/conf.d/security

と入力してファイルを開き、

ServerTokens Prod (元々OSだったのを変更)<br />ServerSignature Off(元々ONだったのを変更)

と編集し、以下でリロード。

sudo /etc/init.d/apache2 reload

次に、phpバージョン情報も隠す。

sudo vi /etc/php5/apache2/php.ini<br />expose_php = Off
sudo /etc/init.d/apache2 reload

expose_phpを探すのが大変なので、vimのノーマルモードで「/」を打ち込むと検索モードになり、検索語を入力してEnterキーで検索開始、次の候補へ移動するのは、「n」で。
「/」の代わりに「?」を入力すると上方向に探してくれる。
「n」の代わりに「N」を入力すると逆方向の候補に移動してくれる。

バーチャルホストの設定

バーチャルホストは、一台のサーバで複数のドメインに対して情報を出したい時に設定するためのもの。

cd /etc/apache2/sites-available/
sudo cp default nskw-style.com
sudo vi nskw-style.com

デフォルトファイルをcpコマンドでコピーし、nskw-style.comという名前を付け、開く。
中身は下記のようにしました。

ServerAdmin info@nskw-style.com
ServerName *.nskw-style.com
DocumentRoot /var/www/nskw-style.com
DirectoryIndex index.html index.php
AuthType Basic
AuthName "nskw-style project"
Require user nskw-style
Options FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
AllowOverride None
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
Order allow,deny
Allow from all
ErrorLog /var/log/apache2/nskw-style.error.log
LogLevel notice
CustomLog /var/log/apache2/nskw-style.access.log combined

全部が、さくらVPSにUbuntuをインストールからのコピペです。

sudo a2ensite nskw-style.com
sudo /etc/init.d/apache2 reload

a2ensiteがエラーになりました。上記参考ブログの作者さんに伺っているところです。

ERROR: No site found matching *.kolog.jp!

2行目はリロードで設定反映です。

PHPの設定

色々なモジュールなどをインストールしていきます。

PEAR
PEARはライブラリを提供してくれるサービスらしく、これを導入することで、色々インストールできるようになるってことだと思う。(違ったら誰か教えて。。)

sudo apt-get install php-pear
sudo pear update-channels pear.php.net

sendmail

sudo apt-get install sendmail

これを入れておかないと、WordPressからの自動メールが送られません。
会員登録やコメントのお知らせなど。

APC
APCはPHPの中間コードやらキャッシュやらを最適化して高速化してくれるモジュール。
IDEA*IDEAさんで取り上げられていました。
WordPressが速くなるものです。

sudo apt-get update
sudo apt-get install build-essential
sudo apt-get install libpcre3-dev
sudo apt-get install php5-dev
sudo pecl install APC

最初のupdateはなんだろ。これをやらないと、2行目で404エラーが出ます。4行目をやるとphpizeが入ります。これをやらないと、5行目でphpizeが無いからダメですエラーが出ます。
最後の行では二回何かを聞かれましたが、両方ともエンターキーを押しました(それで大丈夫かどうかは質問中)。

cd /etc/php5/apache2
sudo vim php.ini

でphp.iniを編集で下記を加える

extension=apc.so

各行の冒頭に;があるけど、無視して書いた。

sudo /etc/init.d/apache2 restart

リロードする。

とりあえず、ここまででサーバ側の設定は終了です。

プラグインの作り方資料

道具

WordPressのプラグインを作成するためのテンプレートファイル

WordPressのコアファイルの仕組み。3ステップでざっくりまとめ。

WordPressをダウンロードすると入っているたくさんのファイル、どんな構成になっていて、それらがどんなふうに動いているのか、まずは図を見てください。

クリックして拡大してみてください。

3ステップで理解する

ステップ1:3つのフォルダをおさえる

  • 管理画面を表示させているwp-adminフォルダ
  • 一番馴染みの深いwp-contentフォルダ(テーマやプラグイン!)
  • 色んな関数やapiが詰まっているwp-includesフォルダ

それぞれのフォルダの中にも、かなりたくさんのファイルが入ってますが、ここはヒトカラゲにざっくり捉えます。

ステップ2:ブログのトップページが表示されるフローをおさえる

ユーザがブログのトップページに訪れたときに、だいたいどんな処理が行われているのか、それが図の下半分です。
ひとつずつ読んでけば大丈夫です。

この記事の最後に、それぞれのファイルを読んでみた記事のリストがあります。

ステップ3:その他のファイルを覗いてみる

wp-login.phpはユーザ登録、wp-mail.phpは多分メール制御、などですが、ファイルを開いてみると最初にコメントで大体の機能を説明しているので、把握する。

という感じです!

各ファイルの詳細記事案内

上の図に登場するファイルをひとつひとつ読んできました。
それぞれ記事になっていますので、よろしければどぞ!

フロー図に載っているもの(ステップ2のあたり)

WordPressが動くようになるまでを、1ファイルずつ丁寧に見てます。

その他、重要そうなファイル

上のフロー図には登場してないけど、勉強すると理解が深まります!

以上です。

WordPress管理画面の研究2:index.php

前回はファイル構成をみました。

今回は、wordpress/wp-admin/index.phpです。

管理画面の一番最初のファイルです。

コメントと基本の関数ファイルの読み込み

/**
 * Dashboard Administration Panel
 */

/** Load WordPress Bootstrap */
require_once('./admin.php');

/** Load WordPress dashboard API */
require_once(ABSPATH . 'wp-admin/includes/dashboard.php');

管理画面です。
wordpress/wp-admin/admin.phpと、wordpress/wp-admin/includes/dashboard.phpを読み込んでいます。

ウィジェットやJavaScriptなどの読み込み

wp_dashboard_setup();

wp_enqueue_script( 'dashboard' );
wp_enqueue_script( 'plugin-install' );
wp_enqueue_script( 'media-upload' );
wp_admin_css( 'dashboard' );
wp_admin_css( 'plugin-install' );
add_thickbox();

wp_dashboard_setup();は、dashboard.phpで最初に定義されている関数で、その中に、wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback)というダッシュボードに表示されるウィジェットを表示する関数がたくさん入ってます。

wp_enqueue_script()は、JavaScriptファイルをロードする関数です。
wp_admin_css()は、cssファイルをロードする関数です。
add_thickbox()は、投稿画面で画像をアップロードするときにポップアップというかモーダルウィンドウというか、あの効果を使うためのJSやcssが読み込まれます。

変数

$title = __('Dashboard');
$parent_file = 'index.php';

タイトルや親ファイル。

ヘルプメッセージ

add_contextual_help($current_screen,

	'<p>' . __('Welcome to your WordPress Dashboard! You will find helpful tips in the Help tab of each screen to assist you as you get to know the application.') . '</p>' .
	'<p>' . __('The left-hand navigation menu provides links to the administration screens in your WordPress application. You can expand or collapse navigation sections by clicking on the arrow that appears on the right side of each navigation item when you hover over it. You can also minimize the navigation menu to a narrow icon strip by clicking on the separator lines between navigation sections that end in double arrowheads; when minimized, the submenu items will be displayed on hover.') . '</p>' .
	'<p>' . __('You can configure your dashboard by choosing which modules to display, how many columns to display them in, and where each module should be placed. You can hide/show modules and select the number of columns in the Screen Options tab. To rearrange the modules, drag and drop by clicking on the title bar of the selected module and releasing when you see a gray dotted-line box appear in the location you want to place the module. You can also expand or collapse each module by clicking once on the the module&#8217;s title bar. In addition, some modules are configurable, and will show a &#8220;Configure&#8221; link in the title bar when you hover over it.') . '</p>' .
	'<p>' . __('The modules on your Dashboard screen are:') . '</p>' .
	'<p>' . __('<strong>Right Now</strong> - Displays a summary of the content on your site and identifies which theme and version of WordPress you are using.') . '</p>' .
	'<p>' . __('<strong>Recent Comments</strong> - Shows the most recent comments on your posts (configurable, up to 30) and allows you to moderate them.') . '</p>' .
	'<p>' . __('<strong>Incoming Links</strong> - Shows links to your site found by Google Blog Search.') . '</p>' .
	'<p>' . __('<strong>QuickPress</strong> - Allows you to create a new post and either publish it or save it as a draft.') . '</p>' .
	'<p>' . __('<strong>Recent Drafts</strong> - Displays links to the 5 most recent draft posts you&#8217;ve started.') . '</p>' .
	'<p>' . __('<strong>Other WordPress News</strong> - Shows the feed from <a href="http://planet.wordpress.org" target="_blank">WordPress Planet</a>. You can configure it to show a different feed of your choosing.') . '</p>' .
	'<p>' . __('<strong>Plugins</strong> - Features the most popular, newest, and recently updated plugins from the WordPress.org Plugin Directory.') . '</p>' .
	'<p><strong>' . __('For more information:') . '</strong></p>' .
	'<p>' . __('<a href="http://codex.wordpress.org/Dashboard_SubPanel" target="_blank">Dashboard Documentation</a>') . '</p>' .
	'<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
);

管理画面右上の、「ヘルプ」というところをクリックすると出てくる、管理画面のお助けコンテンツです。
多分、一つ目の引数で表示場所を指定して、2個目の引数でメッセージ内容を記述。

HTMLソースを作る

最後に、色々と組み合わせてHTMLを作ってます。

require_once('./admin-header.php');

$today = current_time('mysql', 1);
?>

<div class="wrap">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?></h2>

<div id="dashboard-widgets-wrap">

<?php wp_dashboard(); ?>

<div class="clear"></div>
</div><!-- dashboard-widgets-wrap -->

</div><!-- wrap -->

<?php require(ABSPATH . 'wp-admin/admin-footer.php'); ?>

admin-header.php読み込み、タイトル書き出し、wp_dashboard()、admin-footer.php読み込みです。

WordPress管理画面の研究1:ファイルの構成

WordPressの管理画面がどのような仕組みで動いているのか、研究したいと思います。

ファイルの構成

URLを見てみると、管理画面のダッシュボードは、http://www.example.com/wp/wp-admin/index.phpとなっているので、大体がwp-adminディレクトリに入っているのでしょう。

主なところを見繕うと、

index.php
最初に読まれるファイルですし。
admin.php
パッと見、色々設定がありそうでした。
includes/dashboard.php
ダッシュボード、どうやって動いてるんでしょう。他にも、includesディレクトリにたくさん色々入ってます
admin-header.php / admin-footer.php
管理画面全体で共有されていると思われる、ヘッダ、フッタの出力用?
post.php / post-new.php
投稿の仕組みは抑えたい
upload.php / themes.php / plugins.php / users.php / tools.php など
左側メニューのリンク先でした。
cssディレクトリ
62個のcssが入っているのですが。。。
jsディレクトリ
60個のJavaScriptファイルが入ってます。

というわけで、次回以降、少しずつ色々見ていきたいと思います。