カテゴリー別アーカイブ: 問題解決ログ

テーマのカスタマイズ(カスタムヘッダーとか)のプレビューが表示されない事件他

ちょっとハマった案件があったのでMEMO。

Q 1: WPのドメイン・サーバー移転を行ったんだけど、カスタムヘッダーとかの設定が消えてしまっているみたい・・・

A1:WPのデータベース移行時に、ただドメイン変えただけだとダメなことがあるよ。

参考サイト:http://webcre-archive.com/2012/10/04/wordpress-db-url-replace/

↑こちらを参考にすると良さげです。

補足:

WPの移行の流れは、

1:(古サーバ)FTPファイル一式ダウンロード

2:wp-config.phpを新しいDB情報に更新

3:(新サーバ)FTPファイル一式アップロード

4:(古サーバ)DBエクスポート

5:sqlファイル (古)aaa.com⇒(新)bbb.comへ置換 【★】

6:(新サーバ)DBインポート

以上。

★の部分で適当に置換できるエディタとかでエイってやっても上手くいくんだけど、ダメなプラグインとかテーマもあるのです。シリアライズされたデータがどーのこーので。

そんなときは上で紹介したページを参考にちゃんとドメインを変更。

 

Q 2: カスタムヘッダーの設定とか、反映されたけどなぜかプレビューが出ないよ

A 2: index.htmlとか残ってない?

テーマ>カスタマイズで、右側のプレビューが表示されない!
左ではちゃんと設定が反映されているんだけど・・・

謎・・・

DBは問題なさそだし、FTPも問題なさそだし、いったい何がいけないのか、超ググっても解決策出てこないしこのまま徹夜かも・・・って、リニューアル前のindex.html残ってんじゃん!!

こいつがあると、テーマのカスタマイズのプレビューは出てきません。

超どハマリして数時間ドブに捨てたけど、基本に返ることの大切さを学んだよ・・・

以上!

 

taxonomy.phpで記事が表示されない!

症状

カスタム投稿タイプ・カスタム分類(タクソノミー)を作り、カテゴリー一覧のようにアーカイブ表示させたいときに使うテンプレートが【taxonomy.php】です。

通常の使い方としては、「taxonomy.php」または「taxnomy-[タクソノミー名].php」とかのファイルを作成し、
以下のような基本的なループを書くと一覧が表示されます。

<?php if(have_posts()): while (have_posts()):the_post(); ?>

<h1><?php the_title(); ?></h1>

<?php endwhile; else: ?>
<p>記事はありません</p>
<?php endif; ?>

 

でも出なかったんです・・・

無理やりquery_postで指定すれば出たんですが、標準の方法ででないってことは何かがおかしいってことなので調べました~

プラグインの設定間違ってた

さんざん調べて分かった答えが、プラグイン「Custom Post Type UI」の設定でした。

単純な自分のミス!ですが意外と気づかない・・・

Custom Post Type UI の設定

Custom Post Type UIはカスタム投稿タイプやカスタム分類を簡単に作成・管理できるプラグインで、お気に入りです。

カスタム投稿のオプション「Exclude From Search 」を「True」にしてしまっていたのが今回の原因でした。
False」に直したらちゃんと表示されました~。

デフォルトは「False」なので、自分でなぜか「True」にしちゃってたんですね・・・

 2014-08-01_030025

設定の確認・変更はプラグインのカスタム投稿の設定画面「Manage Post Types」を開き編集画面へ。
「Advanced Options」を開くとありますよー

 

 

bxSliderでmode:fadeが効かない

カスタマイズがしやすくて、設置も簡単で言うことなしの万能スライダーbxSlider。
大好きすぎてスライダー実装する制作では8割がたこのスライダーを使用しています。
メインビジュアルだけでなく、スライド系のところはもう全部これ。

http://bxslider.com/

そんな大好きなbxSliderでフェードモードが効かないという状況に陥り、ググってもダメで、いろいろやってみて解決したのでメモ。

fade:’mode’が効かない

「mode:’fade’」とオプション指定すると、横スライドではなくフェード切り替えになるはずなのですが、
なぜか画像が出ない。一枚も。

「mode:’horizontal’」とか「mode:’vertical’」は問題ないのに。なぜ・・・

解決:overflowが問題でした。

ulにoverflow:hiddenしていたことが原因でした。。
フロートするリストが多くて、フロートクリア用に全部まとめてul{overflow:hidden}ってな感じで指定しちゃってたのがまずかった。

設定を解除するか、bxSliderを使うulだけ「overflow:visible;」に設定すればOK。

wordbookerからSocial Networks Auto Posterに乗り換えてはまった罠

FB投稿(リンクシェア)が一般に公開されない!

wordbookerが設定も簡単で重宝していたのですが、今月あたりから使えなくなり、サポートも終了とのことで乗り換えプラグインを探すことに。

いろいろ調べて「Social Networks Auto Poster」が便利そう!で入れてみました。

wordbookerではAppを作る必要がなかったのですが、
Social Networks Auto PosterではFB Appを作成しAppIDとPWが必要になります。
そこが面倒だったのですが、設定もわかりやすく、無事WP投稿がFBのタイムラインに反映されてよかったよかった。

と、安心してたら問題が。。。

FB投稿(リンクシェア)が一般に公開されない!

FB管理者で入って確認するとちゃんと反映されてるし一般公開になってるのに
ログアウトしてFBページを見てみると反映されていない。。

原因はプラグインじゃなくてFB APP

Appについて無知だったことが一番の原因なんですが・・・

▼赤枠の部分がじゃなくてになっていたら要注意。
マウスを当てると「not available to all users because your app is not live」になります。
つまり、「アプリが生きていないため、すべてのユーザーが利用できない」ってこと。

fbapp

こりゃいかん。

解決策

①まずSetting(設定)画面でメールアドレスを入力し、変更を保存。

fbapp2

②次にStatus&Reviewを開き、「公開しますか?」的な英文の横のボタンをクリックしYesに。

fbapp3

なんかウィンドウがでてきたら「承認」をクリック。

▲さっきだった部分がになります。

 

これで完了。

今まで公開されていなかった投稿も全部一般にも公開されました!

 

 

 

 

 

box-shadowが効かない

box-shadowを付けたいボックスの下の要素にbackgroundが入っているとbox-shadowが効かない・・・というか見えなくなってしまう。

↓の図でいうと、1番目のDIVは2番目のDIVのbackgroundがnoneなのでシャドウが効いてる。
2番目のDIVは3番目のDIVにbackgroundが入っているため効かなくなっている。
3番目のDIVは下に何もないので効いてる。

2014-06-23_011948

 

解決策

▼効かなくなってしまったボックスにこれをつける

div#box02{
	position:relative;
	z-index:2;
}

z-indexの値は適当に。

2014-06-23_012726

 

 

 

TinyMCE Advancedを最新版にしたら・・・

文字カラーとかを自由に設定できる「その他の色」カラーピッカーがなくなってしまった!!

▼バージョンアップ前にあった「その他の色」。クリックするとカラーピッカーが出てくる。

2014-06-11_045233

▼TinyMCE Advanced 4.0に更新したら「その他の色」がない!

2014-06-11_045452

http://www.laptoptips.ca/projects/tinymce-advanced/より

 The “More Colors” dialog is missing

This is a change in TinyMCE 4.0. By default is includes only pre-defined colors. If you prefer to select custom colors, try the TinyMCE Color Picker plugin.

・・・TinyMCE Color Pickerっていうプラグインを使えと。

▼入れてみた。

2014-06-11_050009

▼「Add a color」をクリックするとカラーピッカーが出て

2014-06-11_050043

▼「Apply」をクリックすると

2014-06-11_050115

▲ここに登録されるみたい。新規投稿のときもこの色は残ってて便利かも。

この最新バージョン、他にも使えなくなってしまった機能がいろいろあるらしい。。
テーブルのセルの背景色とか。

そんなときはめんどいけど前のバージョンをインストールしなおしたほうが早いかも~

▼ここから好きなバージョンをげっとできます。

http://wordpress.org/plugins/tinymce-advanced/download/

 

 

WPでindex.phpがリダイレクトされて困る

静的なページのサイトをWPに移行するときに、とりあえず今のサイトはそのままで同じディレクトリにWPインストールして制作を進めることってよくありますよね?

ユーザーからは基本的にhttp://example.com/index.tmlが見える。
制作のチェック時はhttp://example.com/index.phpにアクセスして表示を確認ってこと。

それをやろうとしたところ、どうしてもhttp://example.com/index.phpからhttp://example.com/にリダイレクトされてしまう。。

困った。

 

解決

.htaccessのチェック

.htaccessを確認してサイトURL統一のため(SEO対策)の▼コレ系の記述があったらコメントアウトしておく。

RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
RewriteRule ^(.*)index.(html|php)$ http://%{HTTP_HOST}/$1 [R=301,L]

▼コメントアウトの方法は#を先頭につけるだけ。

# RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
# RewriteRule ^(.*)index.(html|php)$ http://%{HTTP_HOST}/$1 [R=301,L]

 

wp-includes/canonical.phpの一部を変更

参考にしたページ⇒http://ja.forums.wordpress.org/topic/1112

「wpncludes」の中の「canonical.php」を開く。

▼WP3.8.1だと、342行目の1行をコメントアウト。

	// trailing /index.php
// 	$redirect['path'] = preg_replace('|/' . preg_quote( $wp_rewrite->index, '|' ) . '/*?$|', '/', $redirect['path']);

	// Remove trailing spaces from the path
	$redirect['path'] = preg_replace( '#(%20| )+$#', '', $redirect['path'] );

これで解決

 注意点

・WP3.7ぐらいから勝手にマイナーアップデートされるようになってるので、そのたびにやらなきゃダメです。
・オープンしてしまえば逆にURLが統一されるのでイイコトなので戻しておきます。

 

 

contactform7で404エラーになるバグ(?)の解決方法

WordPress3.6のContactform7(バージョン 3.5.2)で変なバグがあるとのことで修正依頼 。

いろいろ調べてみたら原因が分かったっぽいので残しておく。

症状

・名前(必須)
・アドレス(必須)
・メッセージ(必須)

↑のようなフォームで、「必須項目に記入もれがあります。」のエラーを一回だした後、
そのままアドレスとメッセージを入力し「名前」を空欄で送信ボタンを押すと404エラー

ちゃんと検証してないんですがざっくりこんな症状。

 

原因と解決方法

名前のname属性の値が「name」になってたのが原因っぽい。
WP側で使ってるnameとぶつかったくさい。

「yourname」とかに変更して解決。

変更方法はcontact form7の管理画面で変更するだけ。

 2014-06-01_005036

▲ここがnameだとまずいので、▼your-nameとかに変更。
デフォルトはちゃんとyour-nameになってる。

2014-06-01_005128

▼自動送信メールのところもちゃんと変更しておく。

2014-06-01_005255

 

とりあえずこれで解決。

 

 

 

EC-CUBE管理画面で何かすると403エラー

解決:原因はWAF設定

サーバー側の「WAF設定」が原因でした。。
ちなみにサーバーはロリポップです。
コンパネにログインし、「WEBツール」⇒「WAF設定」で該当ドメインを無効にして解決。
(5~10分時間かかります。)

 

WAF設定とは

 http://lolipop.jp/waf/

ロリポップさんの上記ページによると、

WAF(ウェブアプリケーションファイアウォール)は、不正なアクセスによるサイトの改ざんや情報漏洩を防ぐ機能です。 不正なアクセスをブロックしあなたのサイトを守ってくれます。

とのこと。

とても素敵な機能ですが、なんかec-cubeとぶつかっちゃってたみたいですね。

 

 

iphone版Chromeだけクリッカブルマップがきかない

クリッカブルマップでareaをクリックしたらモーダルが開いて・・・てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ!動かない~~~!!!

iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ!!

てなことがあり、解決したので残しとく。

jQueryの書き方とかいろいろ試したけど、結局原因は以下でした。

imgに幅と高さが指定されていない

これだけでした。

レスポンシブでCSSで幅を100%とかにしているため、画像自体には特に幅・高さを入れなかったのが原因。

▼以下がダメコード

<img alt="クリッカブルマップ" src="/images/areamap.jpg" usemap="#hoge" />
<map id="hoge" name="hoge">
<area alt="りんご" coords="435,193,39" shape="circle" href="#" />
<area alt="みかん" coords="369,296,38" shape="circle" href="#" />
<area alt="いちご" coords="295,337,38" shape="circle" href="#" />
</map>

それがimgにちゃんと幅と高さを入れるだけで解決
▼以下が正解コード

&lt;img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"&gt;
&lt;map id="hoge" name="hoge"&gt;
  &lt;area shape="circle" coords="435,193,39" href="#" alt="りんご"&gt;
  &lt;area shape="circle" coords="369,296,38" href="#" alt="みかん"&gt;
  &lt;area shape="circle" coords="295,337,38" href="#" alt="いちご"&gt;
&lt;/map&gt;<map id="hoge" name="hoge">  </map>

これで解決です!