カテゴリー別アーカイブ: WordPress

Vagrantでwordpress

目的:オンラインのWordpressがクラックされた時に速やかに復旧したい
副目的:何度でも気軽に環境再構築したい

Vagrantをインストール。現時点ではv.1.7.2
VirtualBoxをインストール。現時点ではv4.3.6

$ sudo vagrant plugin install sahara

saharaのインストールでエラーが出たのでこちらにしたがって

$ xcode-select --install
$ sudo xcodebuild -license
$ sudo vagrant plugin install sahara
$ vagrant box add --name CentOS-6.6-x86_64-minimal-ja-20150531 ~/centos66-20150531.box
$ cd ~/SaitoToshiki.com
$ mkdir centos66
$ cd centos66/
$ vagrant init
$ vi Vagrantfile

作成されたVagrantfileの内容を下記に書き変える

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure(2) do |config|
  config.vm.box = "CentOS-6.6-x86_64-minimal-ja-20150531"
  config.vm.network "private_network", ip: "192.168.33.10"
  config.vm.provision "shell", inline: <<-SHELL
    yum -y update --enablerepo=rpmforge,epel,remi,remi-php55
    yum -y install --enablerepo=remi,remi-php55 httpd mysql-server php php-mysql php-mbstring php-gd phpMyAdmin gd-last ImageMagick-last
    cd /var/www/html
    curl -LO http://ja.wordpress.org/latest-ja.tar.gz
    tar xvzf latest-ja.tar.gz
    cd /var/www/html/wordpress/
    cp wp-config-sample.php wp-config.php
    chown -R apache:apache /var/www/html/wordpress
    chkconfig mysqld on
    service mysqld start
  SHELL
end

実際には作ってあったファイルをコピー

$ cp ../centos66/Vagrantfile .
$ vagrant up

一気にインストールされて感動。
ここでsnapshotを取り、設定を開始

$ vagrant sandbox on
$ vagrant ssh
[vagrant@centos66 ~]$ mysql_secure_installation

最初のパスワード入力は不要。途中rootのパスワードだけ設定して、後はひたすらEnterをおす。パスワードを”123ABC”としたとすると下記の様にデータベースを作成し、suでスーパーユーザーになって設定ファイルを作る。

[vagrant@centos66 ~]$ mysql -u root -p123ABC
mysql> create database wordpress;
mysql> grant all privileges on wordpress.* to wordpress@localhost identified by 'wordpress';
mysql> quit;
[vagrant@centos66 ~]$ su -
[root@centos66 ~]# vi /var/www/html/wordpress/wp-config.php
[root@centos66 ~]# vi /etc/httpd/conf.d/wordpress.conf
[root@centos66 ~]# vi /etc/httpd/conf.d/phpMyAdmin.conf

wp-config.phpのID/PWは全て’wordpress’に。

wordpress.confは下記の内容をペースト

<Directory /var/www/html/wordpress>
  AllowOverride ALL
</Directory>

phpMyAdmin.confは最初から2つのDeny from Allをコメントアウト

[root@centos66 ~]# chkconfig httpd on
[root@centos66 ~]# service httpd start

http://192.168.33.10/wordpress/
にアクセスするとインストーラが起動、指示通り入力したらインストール完了

http://192.168.33.10/phpmyadmin/
root,123ABCでログイン

全てのテーブルを選んで削除
インポート を選んでwordpressをphpMyAdminよりバックアップしてあったDBファイル、xxx.sql.zip(463kB)を選んでインポート
wp_options > siteurlとhome を’http://192.168.33.10/wordpress’に変更

Appearances > ThemesのテーマをTwenty Fourteenにする
これで昔のエントリーを見ることが出来るようになる

幅がやけに狭いので子テーマ(style.css, functions.php)を作成して横幅いっぱいに使うようにする。

[root@centos66 ~]# cd /var/www/html/wordpress/wp-content/themes/
[root@centos66 themes]# mkdir twentyfourteen-child
[root@centos66 twentyfourteen-child]# vi style.css
[root@centos66 twentyfourteen-child]# vi functions.php

style.css

/*
 Theme Name:     Twenty Fourteen Child
 Description:    Make use of full width page templates in the Twenty Fourteen theme
 Author:         Toshiki I. Saito
 Author URI:     http://www.saitotoshiki.com
 Template:       twentyfourteen
 Version:        1.0
*/

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 100%;
}

.full-width .site-content .page .entry-header,
.full-width .site-content .page .entry-content,
.full-width .site-content .page .entry-summary,
.full-width .site-content .page .entry-meta {
        max-width: 100%;
}

.post-navigation,
.image-navigation {
        margin: 24px auto 48px;
        max-width: 100%;
        padding: 0 10px;
}

.archive-header,
.page-header {
        margin: 24px auto;
        max-width: 100%;
}

.contributor-info {
        margin: 0 auto;
        max-width: 100%;
}

.comments-area {
        margin: 48px auto;
        max-width: 100%;
        padding: 0 10px;
}

/*This section sets page to 100% width */
.site {
	background-color: #fff;
	max-width: 100%;
	position: relative;
}

/*This section sets page header to 100% width */
.site-header {
	background-color: #000;
	max-width: 100%;
	position: relative;
	width: 100%;
	z-index: 4;
}

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' );
}

テーマからTwenty Fourteen Childを選んで終了!

WordPressにてエラスティックレイアウト

エラスティックレイアウト : WEBデザイン&AJAX

このWeb Siteを参考にデフォルトのwp-content\themes\EasyAll\style.cssをエラスティックレイアウトに変更。行間も少し広くした。変更箇所だけ下記に記す。コメントアウトしてあるところがオリジナル。要は760px→100%にして480pxがコンテンツの幅、200pxがサイドバーの幅になっているので、それを動的に変化させてやる。180pxならば200pxの90%なので90%に変更などなど。Firefoxだとそれなりに見えるようになって満足。

自分としては1400 x 1050, 1280 x 1024, 1024 x 768, 800 x 600のWindowサイズでそれなりに見えれば良いし、フォントの大きさも変えられると嬉しい。フォントの大きさに応じてコンテンツの幅が変わるのは見ていて楽しい。

ところがIEだとうまく表示されず。どこがおかしいのだろうか。どなたか教えてもらえるととても嬉しいのだが。とりあえず30分ぐらいでサクッとここまでで終了しておく。

Next:
del.icio.usのcssを見てみる
相対値が良さそうなものを絶対値より変更
時間があるときに簡単なレイアウトの構成の説明を入れる。
ヘッダーの画像を置換、ヘッダーの縦幅を短く
文字の色を黒に近くする

#rap {
min-width:40em;
max-width:80em;
background: #FFFFFF;
margin: 0 auto 0 auto;
/* width: 760px; */
text-align: left;
border: 1px solid #dcdcdc;
}

#header {
background: url(images/syoi.jpg);
width: 100%;
/* width: 760px; */
height: 160px;
margin: 0;
padding: 0;
text-align: left;
}

#content {
float:left;
width:65%;
margin:0 0 0 4%;
/* position: relative;
left: 30px;
float: left;
*/
padding: 0;
/* width: 480px; */
color: #666666;
}

#content h2 {
border-bottom: 1px solid #6F6F6F;
color: #5F707A;
font-size: 13px;
margin: 20px 0 5px 0;
padding: 0 0 3px 0;
text-align: right;
/* width: 480px; */
width: 100%;
}

#content div.post p, #content div.post li {
/* line-height: 130%; */
line-height: 180%;
}

#menu {
float:right;
width:25%;
margin:0 2% 0 0;
/* clear: right;
float: left;
position: relative;
top: 10px;
left: 70px;
margin: 0 0 10px 0;
width: 200px;
*/
}

#menu ul li p {
font-size: 13px;
/* width: 180px; */
width: 90%;
font-weight: bold;
}

#menu ul li h2 {
border-bottom: 1px solid;
/* width: 180px; */
width: 90%;
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 0;
}

#menu ul li#winamp ul li {
/* width: 180px; */
width: 90%;
}

p.credit {
color: #FFFFFF;
background: #5F707A;
border-top: 1px solid #DFDFDF;
clear: both;
font-size: 12px;
margin: 0 auto 0 auto;
padding: 16px 0 17px 0;
text-align: center;
/* width: 760px; */
width: 100%;
}

#wp-calendar {
/* width: 155px; */
width: 90%;
}

.hl-surround{
-moz-border-radius: 5px;
background-color: #F9FBFC;
border: 1px solid #C3CED9;
padding: 8px;
margin-bottom: 5px;
/* width: 400px; */
width: 83%;
overflow: auto;
text-align: left;
}

WordPressのページ機能(hierarchical menu)

13Hz!: 本当にCMSとして使えるブログ。Wordpressのページ機能

WordPressをちょろちょろ使っているがかなり良さそうである。少なくとも今使っているMovable Typeよりはかなり使いやすい。更にBlogシステムの難点だった階層メニューや時系列以外の記事の扱いが「ページ機能」というもので可能になったので、一気にサイト構築全体をWordPressのみで管理をしたくなってきた。迷うのはこれをドメインルートに置くか、ドメインルートは後で自由が効く用にflat htmlにして/blogなどにこれをおくかである。まずはpage機能を含めて、もう少し使ってみるとしよう。

と思ったら「各種設定>パーマリンク設定>独自表記を以下の入力欄に記述」の欄に

/blog/%year%/%monthnum%/%postname%.html

と好きな階層名を含めるだけでブログの内容がその階層名以下に表示されるようになった。アーカイブなども全て/blog以下にリンクが再設定される。そしてページ機能の方は/即ちルート以下に設定できる。

これで決まりですな。サイト構築はWordPressに決定!後は今/blogにインストールされているMovable TypeのデータをWord Pressに綺麗に移行できるかどうか試してみるだけ。

WordPressのインストール(Install)

WordPress XREA広告免除でのインストール

2007.06.01

配布先の確認
wordpress.xwd.jp/

サーバー移転法のCheck
www.google.com/search?q=wordpress+%88%DA%93]

XREAへのWordPressインストールで問題が起きていないかどうかGoogleで確認
www.google.com/search?q=xrea+wordpress

UTF-8での文字化けが問題になることがあるらしい。

確認した配布先からDownload
今回使用したVersionの情報
wordpress-2.2-multilingual-edition – [ Release Notes / Change Log ]
wordpress-me220.zip 1.2 MB 3552 2007-05-20 03:17 089ba2f123fd22158f4aa7864fdd7ec4

下記よりXREAでのサーバー管理画面に行く
www.value-domain.com/web.php

www.sXXX.xrea.com/jp/admin.cgi
などというURLのはず

左の管理メニューから「ファイルマネージャ」起動
wordpressというフォルダが自動的に作成されるので、インストールするフォルダの一階層上のフォルダを選択

左上の「アップロード」を選択
例としてexample.comのルートにアップロードしたとする

右の圧縮ファイルの[Browse…]から先ほどDownloadした「wordpress-me220.zip」を選択
左向き矢印の右にあるCheckマークをクリック

Upload/Unpackに成功したメッセージを確認

example.com/wordpressというフォルダが出来ていて、その中にファイルがあることを確認

example.com/wordpressというフォルダの名前を必要なら変更する。記事が出来てからフォルダ名を変更したらエラーになった。
ここでは変更しないとする

wordpressのフォルダ(上記で名前変更したならそのフォルダ、してなければexample.com/wordpress)のアクセス権を755→777に変更する

MySQLのデータベースを作るため左の管理メニューからデータベースを選択
MySQLの追加・編集という名のテーブルの左端のラジオボタンでデータベースを選択
username_の後に文字列を指定できるので例えばexample_となっていたらwpなど適当に追加する(example_wpとなる)
パスワードを入力、文字コードはEUC-JPよりUNICODEに変更、メモ欄には適当でよいがWordPressなどと記載
作成ボタンを押す。
これでデータベース名example_wp, ユーザー名example_wp、指定したパスワードのデータベースが出来上がる

example.com/wordpressにアクセスする

「こちらのウィザードを利用してサーバー上で wp-config.php を作成することができます。」
と表示されるので「ウィザード」をクリック

データベース名 example_wp
ユーザー名 example_wp
パスワード 指定したパスワード
ホスト名 localhost
テーブル接頭語 wp_

と入力する、データベース名とユーザー名は同じになる。パスワードはXREAでデータベースを作ったときに指定したもの。
ホスト名とテーブル接頭語はいじらない

ブログ名とemailの入力が促されるので適当に入力(どうせ後で変えられる)

指示されるままにログインすると管理画面に行く。

▼ 外国にいる人はこの設定必要
より「各種設定」タブに行き
サーバー設置地域と UTC との時差:を-5に設定(日本にいる人はデフォルトでOK)

▼ Movable Typeとどちらを長く利用するか迷っている人はこの設定を行う
各種設定>パーマリンク設定にて
独自表記を以下の入力欄に記述を選び
/%year%/%monthnum%/%postname%.html
とする。後は記事のタイトルに必ず(英文字)でスラッグと同じものを指定しておくようにすれば、MTとの完全互換が保たれる。

英文タイトル部分で用いた空白はスラッグでは用いず、Underscoreに替えて記入する

例:MovableTypeでは
フリーキック(free kick)
というタイトルからPermaLinkは
/2007/05/free_kick.html

となる。
WordPressではこの際にスラッグを
free_kick
とすれば上記の指定をしていればURLが同一になる。

再度example.com/wordpressなどWordPressが入っているフォルダのアクセス権を755に変更

追記(2007/6/24):
Useful URLs Prefer Hyphens to Separate Words
Principles – Well Designed Urls WiKi

これらの助言に従い、まだMovable Typeでの記事数が少ないこと、WordPressもというかWordPressの方が標準になっていることより、データの互換性・Import/Exportの心配は少ないと判断し.htmlは削除し、PermaLinkでの文字間はunderscore”_”の代わりにハイフン”-“を使うことに変更した。
つまりPermaLinkは
/2007/05/free-kick
とする。