2017年2月15日水曜日

Twitter Bootstrap利用サイトでIE8だとimgが表示されない

ie8_picture作ったサイトを念のためIE8で確認したら画像が表示されないので対応したときの覚書。

環境: Bootstrap 3.3.7, WordPress 4.7.2

 


1.【準備編】Windows7 + IE8の環境を作る(Hyper-V)

公式サイトでIE8を搭載した仮想マシンがダウンロードできる。

認証が必要。デスクトップに書いてあるのでそのままcmdで叩く。

 


2.IE8だけ読み込むCSSを用意

試した結果表示されない原因はdisplay: tableを指定していたから。

画像は基本的に中央揃えにしたかったので、次のように設定していた(lessを使ってる)。

.img-responsive {
    &:extend(.img-responsive all);
    display: table;
    margin: 0 auto;
}

 

他のに影響与えないでIE8のみに対応したかったので、IE8だけ読み込むCSSを用意して、そちらで対応することにした。

bootstrapを使うときにお約束の記述に追記(WordPressの関数を使ってる)。

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<link rel='stylesheet' href='<?php echo get_template_directory_uri();?>/assets/css/ie8.css' type='text/css' />
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

ie8.cssはこんな感じ。

.img-responsive {
    /* img tag disappear in IE8 when using display:table */
    display: block;
}

あとの細かいところは気にしない。

 

< Related Posts >

2017年2月14日火曜日

WordPressで非公開(private)にした投稿はリダイレクトしないようにする

wordpress_redirectionWordPressでホームページを作成しているときの覚書。

環境: PHP 7.0.15, WordPress 4.7.2

「お問い合わせ」ページから送信した内容を非公開の投稿として保存していた。

そして気付いた。

http://hoge.com/?p=20

とPost IDを付けると

http://hoge.com/鈴木太郎/

に変換(リダイレクト)される。

これはパーマリンクの設定を「/%postname%/」にしておいて、氏名とかを記事のタイトルとして保存した場合に発生する。

Contact Form 7を使っていれば発生しない(と思う)。

 

少なくとも検索エンジンにキャッシュされると困るのでリダイレクトしないように設定した。

このp=20がなかった(is_404)時に鈴木太郎に変換している関数は
/wp-includes/canonical.phpのredirect_canonical()

下記のようにpost_typeで判定してる箇所(117行あたり)があったので

$post_type_obj = get_post_type_object($redirect_post->post_type);
if ( $post_type_obj->public && 'auto-draft' != $redirect_post->post_status ) {
    $redirect_url = get_permalink($redirect_post);
    $redirect['query'] = _remove_qs_args_if_not_in_url( $redirect['query'], array( 'p', 'page_id', 'attachment_id', 'pagename', 'name', 'post_type' ), $redirect_url );
}

「post」タイプは公開しないので、全てリダイレクトしないようにフックを仕込む

function my_registered_post_type($post_type) {
    global $wp_post_types;

    if ($post_type == 'post' ||
        $post_type == 'attachment') {
        if (isset($wp_post_types[$post_type]->public)) {
            $wp_post_types[$post_type]->public = is_user_logged_in();
        }
    }
}
add_action('registered_post_type', 'my_registered_post_type');

プレビューで使うかもしれないので、ログインしているユーザーには許可するようにしてある。

WordPressをフレームワーク的に使うことが多いので気付いて良かった。

 

< Related Posts >

2017年2月8日水曜日

WordPressがBlankだったりトップにリダイレクトするのをデバッグ

wordpress_search久しぶりにWordPressの奥深くを潜っているときの覚書。WordPressは何がどの順番で実行するのか分かりにくいのでハマると長い。

環境: PHP 7.0.15, WordPress 4.7.2

 


1.確認すること

自分用チェックリスト

  1. サーバーにエラーログが出力されているかどうか
    # less /var/log/nginx/error.log
  2. wp_loadedにフックして読み込みが完了しているかどうか確認
    参考:Plugin API/Action Reference/wp loaded | WordPress Codex
  3. template-loader.phpの$templateをデバッグ出力してテーマのどのファイルを読み込もうとしているか確認
    参考:Template Hierarchy | Theme Developer Handbook | WordPress Developer Resources
  4. WordPressの内部で使っている「name」「year」などの名前でPOSTすると動作がおかしくなる
    参考:Class Reference/WP Query | WordPress Codex
  5. 存在しない関数を実行してエラーを起こして読み込まれた順番を確認。要xdebug

 


2.xdebugのインストール手順

YUM経由でインストール
# yum install php-pecl-xdebug
# systemctl status php-fpm

php infoを見て確認
# php -i | grep xdebug

 

< Related Posts >

Related Posts Plugin for WordPress, Blogger...

Blog Archives