「Wordpress」カテゴリーアーカイブ

WP Photo Sphere #2

前記事のつづきです。コードを埋め込んだところに下のような黒枠のリンクが表示されました。記事でコードが2ヶ所あったのでその場所に2つ同じものが表示されたのは予想通りです。

loading

このリンクをクリックすると「Loading…」と表示されますが、その先一向に進みませんでした。はやり一度WordPressのダッシュボードから投稿しないといけないのでしょうか。

ということで、次はWordPressから投稿してみます。

WP Photo Sphere

THETAの全天球イメージをブログに埋め込むには、リコーのtheta360.comへデータをアップロードしてそれを埋め込むのが一般的で、このブログでもそのようにしていますが、外部へアップロードしなくても自分のサーバー内だけでできてしまうWordPressのプラグインがあるようなので試してみました。それは、WP Photo Sphereというプラグインです。

WordPressのダッシュボードのプラグインから検索してインストール、有効化してから投稿の新規投稿画面へ行ってみると、Add a panoramaというボタンが追加されています。このボタンを押して、全天球イメージファイルを追加すると

Add a panorama

とのコードが追加されました。

しかしながら自分の場合、WordPressへの投稿はWindows Live Writerでやっているので、このコードをそのまま、この記事に挿入して先を進めてみます。この下にコードを追加します。

ここで一回投稿してみます。

ブログテーマ変更

さて、先日のWindows Live Writer起動エラーで判明したnakamo.topのブログテーマ相性問題、解決策として、ブログテーマを変更しました。

今までブログテーマは固定幅の3列レイアウトを好んで使ってきました。このレイアウトはなかもとてれびをMovable Typeで構築した時からずっとのもの。愛着はあるものの、昨今のレスポンシブデザインと比べるとどうも古臭さを感じていたのでちょうどいい機会です。

今回選んだテーマはWordpressのTwenty Fourteen、つまりデフォルトテーマの2014年版ということです。Twenty Fifteenもあるのですが、今回選ぶにあたって基準にしたのは、レスポンシブデザインであることと、相変わらずですが、3列レイアウトができること。これを満たすデフォルトテーマがTwenty Fourteen、早速ヘッダー画像などのカスタマイズをしました。細かいところはまだまだですが、ちゃんとレスポンシブ。ブラウザの幅を小さくしていくと、最後はちゃんとスマホ用的表示に変わります。素晴らしい!

なんとなくいい感じにできたので、今日から新装開店です。

Windows Live Writer起動エラー

突然のことでした。Windows Live Writerを起動すると、「Windows Live Writer は動作を停止しました」と出てプログラム終了するしかない状況に陥りました。再インストールするも状況は変わらず、ネットで調べ対応方法をやってみても同じ。調べているうち、Windows Live Writerのオープンソース版でOpen Live Writerというものが出ていることが分かったのでそちらを試すも状況は変わらず、また別のPCでも同じ状況です。

ブログはこれで書いているので、使えない状況はそうとうきつい。別のソフトをさがすもいいものは見つからず。はて、どうしたものか。先日Windows Updateが動いたのは確認済みです。その直後から使えなくなったと思われ。

と、ふとした思いつき。自分のブログは、このnakamo.top以外にもあるので、まっさらな状態からインストールして、別のブログを編集できるかどうかやってみました。すると、なぁんてことでしょう、とちゃんと起動します。ということはブログとWindows Updateとの意味不明な相性の悪さが起こってしまったということなんでしょう。

ならばと、もう少し確認。Wordpressのブログテーマを変えた状態だとどうか。試してみるとうまくいきました。ということは今まで使っていたブログテーマとの相性ということです。まぁ真の原因は不明ですが、対処方法が分かったので一安心。今後どうするか、ブログ投稿前にブログテーマを一時的に変更して、投稿後もとに戻す。なーんてこと面倒くさすぎるよなぁ、ちょっと考えます。

なかもとてれび・鏡の移行#3

デザイン含め、移行前のイメージに修正までひととおりできたので、移行先サーバーへ反映開始。ただ、ドメインのネームサーバー反映が遅いため、先に進まず。早く移行完了したいのに。

というのは、なぜだか分からないのだが移行元MT5で動いているサイトのデザインが消失?してしまい、まったく違うものになってしまってるから。

最終的には、なかもTOP!なかもててれび・鏡のブログ統合が目標!

と言ってるうちにドメインのネームサーバーが反映され、なかもとてれび・鏡もサーバー移転完了。画像は昨日も言ったように比率がすごく変だが、手で直すしかない。でもやっぱ変。

なかもとてれび・鏡の移行#2

なかもとてれび・鏡の移行のつづき。MT5からWordpressへの移行の情報などを調べてるうち、あっと思わせるものが!それはいきなりサーバーを移転するのではなく、ローカルにサーバーを立てるというもの。

まさに目から鱗だった。もともとなかもとてれびは自宅サーバーで開始したのだ。ローカルで思う存分試行錯誤しながら完成させて、最後にレンタルサーバーにアップすればいいんだよ!あー、なんで気付かなかったんだろう?

ということで、ローカルサーバー構築には、XAMPPを使用。XAMPPはApache、MySQL、PHP、Perlがセットになったディストリビューションでローカルで動かす分にはすぐ環境が作れる。まずデータベースを作成しWordpressをhtdocsディレクトリーに入れてMT5からの移行開始。

①MTの記事をエクスポート

もともとMT3.3だったのをMT5.2に上げたのは記事のエクスポート機能を使いたかったからだが、MTのツールにあるはずの「記事のエクスポート」がなぜか表示されていない。プラグインが必要なのか?といろいろ調べたけどそうではないらしい。もしやと思いダミー記事を作成してみたら「記事のエクスポート」が表示されるようになった。既存のデータベースを残してアップグレードする方法は、厳密にいえばアップグレードではなく新規作成のデータ移行方式。インポートされた記事しかない状況だと、記事一覧には表示されるが内部的には記事がないと思っちゃってるということか。これで記事のエクスポートは無事完了。

画像ファイルが保存されたディレクトリーもFTPでダウンロードしておく。

②Wordpressのパーマリンク設定

パーマリンクをMTのものと合わせる。なかもとてれび・鏡の場合は/yyyy/mm/投稿名.phpなので
カスタム構造: /%year%/%monthnum%/%postname%.php

③Wordpressにインポート

WordPressのダッシュボードのツールにあるインポートで、MTのデータをインポートする。インポートの画面で選択するのは、「Movable TypeとTypePad」。ただしインポートファイルの最大サイズが2MBまでとなっているのでこの制限をなくすために、Wordpressのインストール・ディレクトリーにある.htaccessに以下を追記する。

#Change upload limits
php_value memory_limit 34M
php_value post_max_size 33M
php_value upload_max_filesize 32M
php_value max_execution_time 600
#Change upload limits end

追記したらインポート。

次に画像ディレクトリーも適切な場所にコピー(記事データが参照できるように適切な場所へ)する。

これで一応サイトは見れるようにはなる。少なくとも記事は表示される。が、ここからが一番面倒だった。画像が表示されない、サムネイルは表示されてもリンク先画像が表示されない、など。

④画像リンクURLの修正

画像が表示されない原因は、MTのエクスポートデータの中を見たり、Wordpressが表示したページのソースを見たりすれば判断できた。要は画像リンクURLが実際の画像のパスと合っていないのだ。この修正はエクスポートデータを直接編集(文字列の置換などを使って)してインポートしなおす方法で実施したが、なかなかいっぺんにはうまくいかないので何度もそれの繰り返し。ある程度できたところであとはWordpress上で修正とすればよいか。

⑤記事の見栄えの修正

なかもとてれび・鏡で作った記事は画像配置のために表などをよく使っているがそのタグはそのまま移行される。とどうなるかというと、表のセルの大きさ(幅など)がめちゃくちゃになって表示されてしまい、なんだこれ?状態。うーん。困ったけどこれ直すのって1つずつやるしかないな。気が向いたらだけど。ブログテンプレートに合わせた記事の作成は、昨今のレスポンシブデザインのテーマ適用とかを考えた場合はよくないなと感じる。これってなかもとてれび・鏡に限った話ではなく、移行完了した当ブログもまったく同じ。もういまさらムリって感じである。

WordPressアドレスとサイトアドレス

WordPressでは、ダッシュボードの一般設定で、Wordpressアドレス(Wordpressをインストールしたアドレス)とサイトアドレス(ブラウザから指定するサイトのアドレス)が設定できるのだが、nakamo.topではそう設定してもうまくいかなかった。あれ?前からそうだったっけ?

ということで調べてみたら他にもやらないくてはいけないことがあったので、そのメモ。アクセスカウンタ見ても他にアクセスしてる人まだいないっぽいから、なかもTOP!のアドレスはこれまでのnakamo.top/wordpress/からただのnakamo.topに変更。

①ダッシュボードの一般設定でサイトアドレスを変更

②index.phpの変更

wordpressがインストールされたディレクトリにあるindex.phpを以下のように更新して、サイトのディレクトリーに移動。
変更前:require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
変更後:require( dirname( __FILE__ ) . ‘/wordpress/wp-blog-header.php’ );

WordPressの子テーマ

今日なかもび!にyoutubeにアップしてある動画を埋め込んだときのこと。なかもび!はレスポンシブル・デザインに対応したテーマを使っているが、埋め込んだ動画部分がブラウザに合わせてサイズが変動しないことに気付いた。

ということで調べてみると、CSSを使えば対応できることが分かったのでそのメモ。

①埋め込んだiframeタグをdivで囲む。
例:
<div class=”aaa(適当なクラス名)”><iframe ________></iframe></div>

②CSSにクラスを設定する。
例:
.aaa(適当なクラス名) {
position: relative
;
padding-bottom: 56.25%
;
padding-top: 30px
;
      height: 0
;
      overflow: hidden
;
}

.aaa(適当なクラス名) iframe {
      position: absolute
;
      top: 0
;
      left: 0
;
      width: 100%
;
      height: 100%
;
}

とこれで対応できた。ただひとつ問題が。今使っているテーマがバージョンアップされたらCSSも上書きされるため、バージョンアップの都度CSSを変更しなくてはならない。とそこで活躍するのが、Wordpressの子テーマの機能ということも分かった。子テーマとはテーマ(親テーマ)の内容を定義しなおし上書きすることができるテーマであり、これを利用すれば親テーマがバージョンアップされても定義しなおした内容は子テーマとして保持されるというわけである。

今回はCSSだけ変更してみたのでそのメモ。

①子テーマ用のディレクトリを作成

テーマディレクトリ(wordpress/wp-content/themes)以下に子テーマ用のディレクトリ(子テーマ名で)を作成する。

②style.cssの作成

親テーマを上書きするためのstyle.cssを作成する。下記例にあるTheme NameとTemplateが必須項目で、これを記述すればWorkdressが子テーマとして認識する。@import urlは親テーマをインポートするための文言。そのあとに上書きしたい部分を記述する。作成したcssを①で作成したディレクトリにアップロードする。
例:
@charset “utf-8”;
/*
Theme Name: 子テーマの名前
Template: 親テーマの名前
Description: 親テーマの子テーマです
Author: 自分の名前など
Version: 0.1.0
*/

@import url(“../親テーマの名前/style.css”);

.aaa(適当なクラス名) {
      position: relative;
      padding-bottom: 56.25%
;
      padding-top: 30px
;
      height: 0
;
      overflow: hidden
;
}

.aaa(適当なクラス名) iframe {
      position: absolute
;
      top: 0
;
      left: 0
;
      width: 100%
;
      height: 100%
;
}

③子テーマの有効化

WordPressで子テーマを有効化する。

これでうまくできた。

なかもとてれび・鏡の移行#1

Movable TypeからWordpressに移行するのが最終形と目標を立てているなかもとてれび・鏡

WordPressは最新版にするが、MTがあまりに古いのでいろいろ調べてるが、結論としてMTをなるべく新しくしてからWordpressに移行するというのがよさそう。

まずはMT3.3からなかもとあじあで稼働中の4.1にアップグレードしようとしたが、MT.cgiでのアップグレード中に、なんだかデータベースエラー。うーん、よくわからん。

ということで次に試みたのはMT3.3に一旦戻してからMT3.3上でまずはデータベースをSQliteからMySQLへ変更する。これにはすごくいいCGIスクリプトがあるとの情報を得てこれを試す。そのスクリプトはMT Database Converterというもので、MTのデータベースをDB間で相互に変換するというもの。なるほどこれを使ったら意図も簡単にMySQLに変更できてしまった。

ならばということでアップグレードはMTOS(オープンソース版)の5.2.13でやってみた。既存のデータベースを残す方式と上書きする方式があるが、またうまく行かないと困るしすぐ戻れるように残す方式を取った。これは早い話、単に新たにデータベースとMTのアプリ環境を作る方式である。今回はMySQLに替えたこともあるかもしれないがうまく行った感じ。

ということで今日はここまで。まだMT5になっただけ。このあと、Wordpressへの変更とサーバーの移転だが、どっちを先にした方がいいんだろうなぁ。

WordPress iPhoneアプリ

20121217-163440.jpg

このブログを構成しているWordpress用iPhoneアプリを入れてみたのでテスト投稿してみます。

写真もiPhoneで撮ってみて写真を本文が回り込むようにタグ編集してみました。

写真はサムネイルにしてクリックで拡大といきたいところだけど、できないみたい。できないというのは、サムネイルでクリックはできるけど、拡大じゃないということ。ならば最初からクリックできないほうが分かりやすい。

出先などから、手軽に投稿したり投稿済みのものを修正したりするのには、便利な感じ。

修正するときに投稿済みの写真とかもっと簡単にできるソフトってないかねぇ?それにサムネイルも。