カテゴリー: Wordpress

そろそろDockerぐらい使えないと！と思って、仕事が暇な今こそ！とチャレンジ。
で、WordpressとMySQLの環境を作って繋げてやろうと意気込んで開始して、後述する手順でうまくいった。

ただ、後から分かったが、同じ環境でVMWare Workstationも使っているので、Dockerを動かしている間はVMWare側は動かせない・・・
しまった！！！
と思いつつ、とりあえずはDockerインストールと環境立ち上げの手順だけの備忘録を投稿。

Windows10でDocker上にWordPressを立ち上げる

1. Docker CE → Desktop Docker for Windows インストール
   • https://hub.docker.com/search?q=desktop&type=edition&offering=community
   • DockerHubのアカウントを(作成したくないが、)作成して、インストーラをDownload
   • インストーラからインストール(Switch to Linuxにはチェックを入れておくこと)
2. Desktop Dockerを起動、Setting
   • スタートメニュー等よりDesktop Dockerを起動
   • タスクバーにDockerアイコンが表示されたらアイコンを右クリックしてSettingをクリック
   • DaemonのExperimentalにチェックしApply
   • NetworkのDNS ServerはFixed:を選択して「8.8.8.8」を設定
   • ResetでRestart Docker…をクリック
3. コマンドプロンプトを起動
4. Imageの取込コマンド実行(次のrunコマンド実行でimageがなかったら自動的に取り込むのでここは省略できる。)
   • docker pull mysql:5.7.25
   • docker pull wordpress:latest
   • docker images で取り込めたかどうか確認
5. コンテナー作成・起動
   • docker run --name test-mysql -e MYSQL_ROOT_PASSWORD=password -d -p 3307:3306 mysql:5.7.25
   • docker run --name test-wordpress --link test-mysql:mysql -d -p 8081:80 wordpress
     • それぞれ、ポート番号は他と被らない番号にしておきます。
   • docker container ls -a　 で作成できたかどうか確認
6. localhost:8081に接続して確認
   • WordPressの初期設定画面が表示されたら、うまく動作していることになる。

うまくいかないパターン

• DB接続できない
  • MySQLのバージョンがWordpressと噛み合ってないのが原因

他のDockerコマンド

• docker exec -it {コンテナ名} /bin/bash
  • Linux上でコマンド操作可能に
  • cat wp-config.php で定義ファイル内の確認
• docker stop {コンテナ名} 　コンテナ停止
• docker start {コンテナ名} 　コンテナ開始
• docker rm {コンテナ名} 　コンテナ削除
• docker rmi {イメージ名} 　イメージ削除

他のLinuxコマンド

• apt update
• apt install -y vim　(WordPressサーバ上で、VIMを利用する場合)
• apt install -y procps　(MySQLサーバ上でMySQLが動作しているか確認で利用)
• ps aux （プロセス状態確認）
• mysql -u root -p　（MySQL接続）
• exit (Linuxから抜ける)

いやぁ、参った。
自分が基本的なことを怠った所為なのだけど。

DBとかのバックアップはとってたのに、WordPress関連ファイルのバックアップをしないまま、WordPressのバージョンアップをしてしまった。
というのも、ここ最近は、エラーもなくバージョンアップできていたからなのだけど。

で、バージョンアップに失敗し、メンテナンスモードから戻らず、挙げ句の果て、FFFTPでバージョンアップしたファイルをアップロードしようとして、サーバに容量が足りないんだぜ！エラー「552 STOR denied: quota exceeded」が発生し、どうにもならん状態で１週間がすぎた。

で、もうダメかなぁ・・・などとブルーになっていたら、wp-content/upgradeのなかに、古いバージョンのファイルがすべてバックアップされているのを発見。
で、そこからファイルを戻して復旧させることに成功した。

おそらくだけど、バックアップとって、バージョンアップさせたら容量が足りなくなったんだろうな。

ということで、アクセスできなかった方々、申し訳ございませんでした。

今年に入ってから忙しくてGoogle Analyticsを確認できていなかったのだが、どうも2014年1月からの集計ができてなかった。
できていない理由はよくわからないが、それまでWordPressのプラグインを使ってて全然問題もなかったのに、いきなり使えなくなってしまった。
プラグインが古くて使えないのか？、もうこのプラグインは使えないのか？と、別のプラグインで試してみたのだが、結局集計できずじまい。

もう、仕方なく、テーマのヘッダーファイルに無理やりスクリプトを記載して保存した。
不安だから、GoogleのTag Managerも登録してみた。
（でも、Tag Manager自体よくわからない。）

ら・・・うまくいった。

で、結局何が原因なのかはわからないが、＠Pagesの広告がGoogle広告に変わったからかなぁ・・・などと思ったりする。

＜覚書＞
自分のアクセスは集計から除外する

http://11dax.com/google-analytics-2-460.html

自分のIPアドレスを教えてくれるサイト
http://www.cman.jp/network/support/go_access.cgi

ようやくこのブログもWordPress3.5に更新。
バックアップ取らずにやってもうたが、とりあえずは問題ないように思う。

ようやく、このブログのWordpressを更新した。
ついでにレイアウトを変えてみた。
はずみで、Google Fontsなんぞ使ってみた。

トイレじゃなくって、Wordcamp神戸に行ってきた。
神戸は神戸でも、僻地っていったら失礼だろうケド、遠かった。
電車代で800円超ってちょっとつらいな。

で、中身は・・・

正直イマイチ。
もっと、面白い話が聞けるかと期待したが、（スピーカーのブログとかでも煽ってたし）まぁ、さほどでもなかった。

ビデオに撮ってるから話せないってさ、何のためのセッションなの？
（わざわざビデオ停止させて話してくれた人もいたけどね）

あと、セッションのパワポを自身のサイトで公開する、とかいうのもおかしいでしょう。
WCの公式サイトで出すのが普通でしょ？

時間がないから、喋る内容も余裕がないってのは聞く側はもちろんのこと、スピーカーにとっても面白みがないんでないの？

と、前半くだらねぇ～、そんなの検索したら出てくるだろ～みたいな話ばかり聞かされて、正直もう座れなかったら帰ろうと思ったけど、後半はなかなか面白いセッションに巡りあえたのでよかった。

今後また大阪周辺でWordcampが行われることをセツに願いつつ、アンケートは辛口で返した。
（期待の表れなんだよ！）

WordPressに天気予報表示を付けてみる2では、livedoorのWeather Hacksを使った天気予報表示を試してみたが、次はGoogle Weather APIを利用した天気予報表示を試してみる。
cssは省略。

<?php

// APIからXMLデータ取得
$city = 'osaka,osaka';
$gpath = 'http://www.google.com';
$url = $gpath . '/ig/api?weather=';
// 取得データから表示項目取得

$xml = simplexml_load_file($url . $city);

$objInfo =  $xml->weather->forecast_information;
$first_date = $objInfo->forecast_date[data];

echo '<div>in ' . strtoupper($objInfo->postal_code[data]) . '<br>';

$i = 0;
foreach ($xml->weather->forecast_conditions as $cond) {
	$week = $cond->day_of_week[data];
	$icon_url = $gpath . $cond->icon[data];
	$low = $cond->low[data];
	$high = $cond->high[data];
	$condition = str_replace('Chance of ', '', $cond->condition[data]);
	
	echo '<div>';
	echo '<img src="' . $icon_url . '" alt="icon" />';
	echo '<div>' . '';
	echo date('Y-m-d', strtotime ($first_date) + $i * 86400) .'[' . $week . ']<br>' . $condition . ' ';
	if (strlen($low) > 0 || strlen($high) > 0) {
		echo strlen($low)>0 ? convertF2C($low) : '';
		echo '-' ;
		echo strlen($high)>0 ? convertF2C($high) : '';
		echo '℃' ;
	}
	echo '</div>';
	echo '</div>';
	$i++;
}
echo '</div>';

//華氏摂氏変換
function convertF2C($val) {
	return round(($val-32)*5/9);
}
?>

Google Weather APIでは今日を含めた4日分の予報が取得できる。

って思って調べた。
要するに、

記事の内容を端的に表す画像

ということのようだ。

いろいろな使い方があるようだが、私はその記事のカテゴリを表すものとして使ってみようと思う。
で、アイキャッチ画像を作ってみた。

WordPressはキャラクターの「わぷー」

ダメか・・・

あんまり気にしていなかったが、テーマが古いと使えないプラグインがあったので、やむを得ずテーマを替えることにした。

下のうち、使えなかったのが、WP To TopとSyntax Highlighter ComPressの2つ。
ソースコード表示用のプラグインは色々あるけれど、前のテーマだとどれも使えなかった。
（スタイルシートは読み込んでいたけど、効いてなかった）

まぁ、今のテーマも、オリジナルから結構カスタマイズしてしまったが、結構気に入っている。

で、今使っているプラグインは以下のとおり。

• Akismet：スパムコメント防御用
• emoji：投稿時絵文字使用のため
• Ktai Style：携帯表示用
• Revision Control：投稿・ページリビジョン管理の設定用（普通は設定できない）
• Simple Lightbox：画像のLightbox表示用
• Syntax Highlighter ComPress：ソースコード表示用（スタイルシートが選べる）
• Ultimate Google Analytics：Google Analitics用ID設定
• WordPress Importer：インポート用プラグイン
• WP Multibyte Patch：マルチバイト文字利用のため
• WP To Top：ページを下にスクロールしたとき表示される「ページTopに戻る」アンカー

使っていないプラグイン

• PS Disable Auto Formatting：途中から入れると大変なことになるので、使用中止
• Hello Dolly：Hello dollyの歌詞表示。管理画面にしか出ないので使っていない

今後入れたいのは、コメント用の絵文字ツールかな。
あるのは知っているけど、ちゃんと動くかどうか試していない。

[2017/03/29追記]
上は昔使ってたThemeの話で、今はちょっと変えてます。

「WordPressに天気予報表示を付けてみる」のphpコード

<?php
// APIからXMLデータ取得
$city = '81';
$url = 'http://weather.livedoor.com/forecast/webservice/rest/v1?city=';

// 取得データから表示項目取得
// 今日
$xml = simplexml_load_file($url . $city . '&amp;day=today');
echo '<div>';
outputWeatherInfomation($xml);

// 明日
$xml = simplexml_load_file($url . $city . '&amp;day=tomorrow');
outputWeatherInfomation($xml);

// 明後日(地区の出力)
$xml = simplexml_load_file($url . $city . '&amp;day=dayaftertomorrow');
outputWeatherInfomation($xml);
echo '<strong>in ' . $xml->location->attributes()->pref . $xml->location->attributes()->city . '市</strong><br>';
echo '</div>';

// 市区町村
echo '<br style="clear:both;">';
//outputPointInfomation($xml);

// 取得したXMLより天気情報出力
function outputWeatherInfomation($xml) {
	echo '<div>';
	echo '<div>' . date_format(new DateTime($xml->forecastdate),'m/j') . '<br>';
	echo '<small>' . $xml->day . '</small></div>';
	echo '<img src="' . $xml->image->url . '" width="' . $xml->image->width
       . '" height="' . $xml->image->height . '" alt="' . $xml->image->title . '" /><br>';
	echo '<div>';
	echo $xml->telop . '<br>';
	if (strlen($xml->temperature->min->celsiu)>0 || strlen($xml->temperature->max->celsius)>0) {
		echo $xml->temperature->min->celsius . '～' . $xml->temperature->max->celsius.'℃<br>';
	}
	echo '</div>';
	echo '</div>';
}

// 取得したXMLより市区町村情報出力
function outputPointInfomation($xml) {
	echo '<div>';
	foreach($xml->pinpoint->location as $pnt) {
		echo '<a href="' . $pnt->link . '" target="_blank">' . $pnt->title . '</a>|';
	}
	echo '</div>';
}
?>

css等は省略。

以下のサイトを参照に、かなり適当に作ってみた。

• 946.BLOG WordPress に今日の天気ウィジェットを追加
• livedoor Weather Hacks

成果はカレンダーの下。
ウィジェットにせず、sidebar.phpにincludeしているだけの適当作業。

お粗末だけど、もともと、ActionScriptで同様のブログパーツを作ろうと思ってたのに、結局セキュリティ関連でどうやっていいのかわからないから諦めたというのが、最もお粗末なところ。

このサンプル、コンパイルしなおさなきゃいけないので、動作確認がメンドクサイ。
（proxy.phpの位置なんて、パラメータで渡したらいいじゃん・・・と思うのは間違い？）

折角なのでWordpressのカスタマイズをしてみる。
本当はプラグインでやるべきだケド、それはまた別の機会に。

前からやりたかったのが、カレンダーの土日の色づけ。

calendarでソースをGrepすると、
wp-includes/general-template.phpに処理があることがわかった。
その中のfor文で1日～末日をグルグルまわしているところに、土日それぞれのセルにsaturday,sundayのIDを振る処理を追加。

for ( $day = 1; $day <= $daysinmonth; ++$day ) {

まずは、$weeknumって変数を作って曜日を数値化したものを取得。
次に、if文に分岐を増やして、土曜、日曜分のIDを振ってやる。

$weeknum = calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear)));

if ( $day == gmdate('j', current_time('timestamp')) && $thismonth == gmdate('m', current_time('timestamp'))
&& $thisyear == gmdate('Y', current_time('timestamp')) )
$calendar_output .= '<td id="today">';
// add 2011/08/05 from ----------------------
elseif ($weeknum == 0)
    $calendar_output .= '<td id="sunday">';
elseif ($weeknum == 6)
    $calendar_output .= '<td id="saturday">';
// add 2011/08/05 to ----------------------
else
$calendar_output .= '<td>';


あとは、使用中のthemeフォルダにあるstyle.cssの#todayあたりに、saturday,sunday用のスタイルを追加しておけばOK。

以上、オシマイ。

でけたよ～！

WordPress Plugins/JSeriesよりemojiプラグインを拾ってきた。

1キロバイトの素材屋さんや、
エモジバなどで、絵文字素材を拾ってきた。

そして、使ってみる。

ちょっと感動・・・

[2017/03/29追記]
Wordpress4.2から絵文字が使えるようになったらしいのだが、気にすることもなくずっ～～～と過ごしていた。
しかし、よく考えると、外部のプラグインに依存するというのもちょっとなんなので、一気に修正。

http://getemoji.com/

にアクセスして、利用できる絵文字を確認。
使いたい絵文字をコピーして、貼り付けるだけでOK。

OK？

なんか、見た目が違うような・・・あぁ、OSによって違うのか・・・😅

いや、長かった。
何がって、Blogを立ち上げて、WordpressとPHPの学習しようと計画してから、今日に至るまで。

とりあえず、Wordpressの最新版をDownloadしてきて、@pagesにUploadしてからというもの、

1. データベースに接続できませんエラー発生
2. Fatal error: Call to undefined function wp_dashboard_setup() in /usr/local/www/htdocs/xxxx/public_html/wp-admin/index.php on line 15エラー発生
3. アップロードしたファイルを…public_html/wp-content/uploadsに移動できませんでした。エラー発生
4. フロントページの文字化け（なぜかフロントだけ文字化け）

と、続けざまにエラーが発生。
ひとつ解決すると別の問題がピョコッと発生するので@pagesでの掲載を諦めかけていたが、ここ数日意地になって踏ん張ったおかげで、今日という日を迎えることが出来た。

さて、解決法メモ書き。

1. 単に、wp-config.phpの記載ミス
2. 解決方法は下記記事を参照。（もう、この記事なかったら諦めてただろうな。ありがとう）
   なんくるないさ「@PAGESにWordPressをインストールしたらエラー発生」
   ・・・要は、パスの取得の問題。
3. これも単に、フォルダのアクセス権限の問題。uploadsフォルダのアクセス権限を707か、777にするだけ。
4. 取得したテーマが海外用だったため、charaset=UTF-8に書き直して解決

ということで、なんとか正式OPEN！

ちなみにテーマはDesign DiseaseからDownloadして、カスタマイズ。