アップデートに失敗したワードプレスの復旧

桜の遅い新潟ですが、それでも花見に行く前に葉桜になりそうです。

何の脈絡もありませんが、今回もWordPressのはなしを。

wp_up01

ダッシュボードから簡単にシステムのアップデートができるWordPressですが、たまに更新に失敗して、「メンテナンス中」から復旧できなくなることがあります。プラグインのアップデートでもあります。
なんかアップデートが進まないなぁ、と思ってサイトを表示させようとしても、メンテナンスモードのまま、

wp_up02

と、なって、何も受け付けなくなってます…。
プラグインとの相性か、サーバーのPHPのバージョンか、原因は様々です。
ログインも出来なくなるので焦りますが、以下の方法で復旧できます。

慌てずFTPでインストールフォルダにあるファイル、「.maintenance」を削除しましょう。
とりあえず元に戻ります。
ファイルそのものは一時ファイルですので、削除しても問題ありません。
あとは原因を探ってから、再度更新しましょう。

私は先日この症状が出た時は、WordPress側の新バージョンが出るのを待ちました。
消極的解決法。


ディレクターとデザイナーのイメージ共有

business_2_mika

4月に入りまして、花粉さえ飛んでなけれは、
いい季節になりました。

今回は、デザイナーに作業をお願いするときに
気を付けていることをまとめました。

PAK88_tetuyaakenosyain20141123141151500

私は、普段webディレクションの仕事していて
お客様から聞いてきた内容を元に、構成案とデザイン案を制作します。
構成案は自分で作成すればよいのですが、ページのデザインはデザイナーにお願いします。

デザイナーへの説明がうまく伝わらないと、
「イメージと全然違う」
「何度も修正が入って予算をオーバーしてしまった」
などのトラブルが起こってしましまいます。
ドラマで良くある「○○君これお願い。」みたいに何の説明もなく
仕事が上がってくることは、ほぼありえません。

上記のトラブルが起きないよう
私がデザイナーにお願いするときの注意点をまとめてみました。

 

1.情報、目的、サイト構成の説明
D0011_udemakuri420140830142954500
デザイナーにお客様の情報や目的、サイト構成を説明するようにしています。
まずは、ディレクターとデザイナー同じ情報を共有することがスタートラインです。
ここをおろそかにすると、後々大きなズレが生じる場合があります。

 

2.掲載情報
AL001-1onakakaigi20140830500
掲載内容と情報の順位付けを行い指示します。
デザイナーが構成に時間をかけて、後ですりあわせを行うよりも、
はじめから指示をした方がスムーズに作業を行えます。

 

3.色の指定
PAK85_iroenpitunaname131310500
メインカラーを指定します。
お客様指定の場合もありますし、デザイナーと相談して決める場合もあります。
どちらにしろ明確に指示します。
サブカラーは状況に応じて指示しています。

 

4.テイストの近いサイト
Green15_jyougi20141123165428500
他のサイトを使ってイメージやデザインの方向性を伝えます。
最低3~4サイト用意します。
コピーサイトにならないように、
全体の雰囲気や部分的に参考にするなどサイトによってどこを参考にするのか説明します。
デザイナーに考える力をつけるにはこの方法はおすすめしませんが、
私は、感覚・雰囲気など、言葉で明確に表現しにくい部分を共有するために使用しています。

 

5.スケジュールの確認
PAK85_yoteihyouwotukerubiz500
今持っているスケジュールを確認して無理のない納期を設定します。
あまりにも短納期で仕事を詰めすぎると、それなりのデザインしか上がってきません。
全ての仕事でできるわけではありませんが、意識して行っています。

 

まとめ
以上の点を意識して行っていますが、
いきなり100点のデザインは上がってきません。
デザイナーがお客様と直接お話しできれば、デザイナーの能力の問題となりますが、
お客様 → ディレクター → デザイナーの場合は、
ディレクターがお客様の話をまとめて、デザイナーに指示していますので、
半分はディレクターの責任だと思います。
「思ったものをあげてこない」ではなく、「思ったものをあげてもらう」ために何をするかが大事だと思います。


設置済みワードプレスのURL変更方法

暖かくなってきました。新潟の桜は次の週末あたりに咲くようです。新潟市内だと、鳥屋野潟の桜がキレイですね。

5c2bc9d11e0f89c6a5ee57771145c6d1_m

ここしばらく、WordpressのURL変更を行う事が数件あり、だいたいやり方が固まったので、手順を公開してみます。
phpmyadminは使いません。ドメインの変更がないことが前提です。

はじめに

テストURLでとりあえず構築したワードプレスを正式URLに変更することはよくあると思います。
または、考え無しにテストのつもりで構築してしまい、後から変えたくなったりとか。クライアントの気まぐれでアドレス変えてくれとか…。まぁ色々ありますよね…。

★手順★
1.設定画面で、ブログのURLを変更する。
2.データベースの該当箇所を書き換える。
3.必要があれば、URL(ドメイン)を変更する。
4.確認する。

例として、
旧 http://www.agn-web.com/test04/
このブログのURLを
新 http://www.agn-web.com/niigata/
に変更するケースで説明します。

1.設定画面で、URLを変更する。

ダッシュボード→設定で、
・Wordpressアドレス(URL)
・サイトアドレス(URL)
を両方変更し、保存します。
blog_wpurlch_01
保存を押すとアクセスできなくなって、404がでますが、気にしません。

2.データベースの該当箇所を書き換える。

serch-replace-DBというPHPで書かれたツールを使います。
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
こちらからzipファイルをダウンロードしてください。
解凍したらフォルダごと、ワードプレスのルートディレクトリにアップロードします。
フォルダ名は仮にSRDBとしておきます。
ブラウザで、SRDBフォルダにアクセスします。
http://www.agn-web.com/test04/SRDB/
blog_wpurlch_02
ワードプレスで使われているDBを自動で読み込んでくれます。
このツールを使って、DB内のURLを書き換えます。
今回は、agn-web.com/test04をagn-web/niigataに置き換えます。
dry runでテストできます。明らかな間違いが無ければ、live runで実行します。
view changeで変更箇所を確認することも出来ます。

3.URLの変更

今回は、サーバー上のディレクトリ名をtest04からniigataに書き換えます。
FTPクライアント上で変更すると良いでしょう。

4.確認。

URLの変更のみなら、即座に反映されますので、変更後のURLで表示できるかどうか確認します。
チェックポイントとしては、
・変更後のURLでアクセスできるか。
・見た目で画像などがきちんと表示されているかどうか。
・画像のリンク切れがないか。
・ページ遷移のリンク切れがないか。
等を確認します。特にテーマをカスタマイズしていた場合、URLを記入している箇所は要注意です。
無事に変更できたことを確認したら危険ですので、必ずSRDBフォルダを削除しておきます。

5.注意

・変更までにDBのバックアップを取りましょう。失敗すると全てのデータを失いかねませんので、慎重に。
・上記手順を間違えると、管理画面に入れなくなりますので、ご注意を。
・元に戻せるデータを用意してから、作業するのが基本です。
・上記はWordpressのversion4あたりの話です。
・どうにもならなくなったら、新規構築する割り切りも大事。
お約束ですが自己責任で。絶対に失敗できない方はご依頼ください。
・色々書きましたが、サーバー引越しよりはラクです。引越しの時はwp-configの書き換えなども必要です。


見やすい&作りやすい Photoshopのレイヤー管理

いよいよ明日から4月!
始まりの季節は、なんだかいつもそわそわしてしまうsakaiです。

新年度ということで、環境の変化が多い時期ですが、
そんな中、新たにWebデザイン制作業務に携わることになった方もいらっしゃるのではないでしょうか。

「Photoshopは使ったことがあるけど、Webデザインには利用したことがない」
そんな方向けに、Web制作においての初歩的なPhotoshop操作のポイントをまとめてみました。

今回ご紹介するのは、作業しやすい、他の人が見てもわかりやすい構造にするためのレイヤー管理方法です。

※以下の記事は、PhotoshopCS6の環境をもとにしています。

・レイヤーの自動選択にチェックを入れる
・バウンディングボックスにチェックを入れる

01

こちらにチェックを入れると、直接カンバスからレイヤーが選択できるようになります。

拡大・縮小・回転も、バウンディングボックスで変形可能!

スクリーンショット 2015-03-31 13.49.40

・レイヤーコピー時に「〜のコピー」がつかないようにする

レイヤーコピーを繰り返すとレイヤー名のうしろに「〜のコピー」がずらり…
これだとちょっとわかりづらいですね。

02_001

レイヤーパネルのオプションを開き「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外します。

02_03

これで、コピーを繰り返しても「〜のコピー」はつきません。
すっきりとしたレイヤーパネルになりました。

02_002

・レイヤーに名前をつける
・グループ化を活用する

たとえば、ボタンパーツは1つのグループに。ヘッダーは1つのグループに。
最初はざっくりとでもかまわないので、こまめにまとめながら制作を進めましょう。

スライスで書き出すときや、あとから変更を加えるとき…
整理されていないところから目的のレイヤーを見つけ出すのは至難の業。

たとえばコーダーさんなど、データ作成者以外の方にデザインデータを渡す場合は特に気をつけたいものです。

・「⌘+shift」でグループ全てを折り畳む

フォルダが増えてくると、開かれたグループを一つ一つ折り畳むのは手間になってきます。
「⌘+shift」でフォルダ脇の三角アイコンを押すと、1度に収納することができます。

03

・レイヤーのフィルタリングを活用する

「テキストレイヤーだけを編集したい」「背景画像だけを編集したい」
そんなときに便利な機能です。

04

左から「ピクセルレイヤー」「調整レイヤー」「テキストレイヤー」「シェイプレイヤー」「スマートオブジェクトレイヤー」のフィルタリングです。

これらを選択すると、対象の属性レイヤーのみを表示することができます。
ちなみに複数選択することもできます。

選択しているとき、一時的にグループ表示ではなくなりますので、
あらかじめグループを色分けしておいた方が、よりわかりやすくなるかもしれません。

05

いかがでしたでしょうか。
レイヤー整理の参考に、少しでもなれたら幸いです!