wordpress

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

bxsliderをwordpressに組み込むとfirefoxで不具合がでるやつの対処

bxsliderでトップページのカルーセルを作る。
各種ブラウザでチェックして問題なく動いている。

そのソースをwordpressに組み込むと最初の1枚目の表示でFirefox不具合がでていた。

具体的には、本来表示されるべき1枚目ではなく、最後に表示されるべき画像が1枚目のところに出てしまっていた。

chromeでは問題ない。Firefoxだけでエラー。

ローカルではうまくいっていたのになぜ??

調べてみた結果、結論から言うと、

wordpressの

srcset=""

属性がエラーを 起こしていた。

wordpress4.4からはレスポンシブ対応するために、srcsetというのがimgタグに自動挿入されるっぽい。

<img src="hoge.png" srcset="hoge.png 1000w, hoge-300x140.png 300w">

みたいな感じで。



srcset属性とは、HTML5で策定された新属性で、ブラウザの大きさに応じて違う画像を読ませることができる、というもの。

css media-queryのブレイクポイントでの処理をhtmlだけでできちゃう、というものだ。

便利っちゃ便利かもしれないけど、どうやらIEに対応していない。
最新のIEにも。

srcset属性の各種ブラウザ対応
 

そしてbxsliderライブラリでも不具合がおきた。
(bxsliderでもjs側でレスポンシブ対応してるわけだから、そりゃガチンコぶつかりあっても不思議はないよね。)
 

とりあえず、ちゃんとコーディングしてからwordpressを導入する場合は、srcset属性が自動付与されるのを無効化したほうがよい。

やり方はfunction.phpに1文をいれるだけ。


 add_filter( 'wp_calculate_image_srcset', '__return_false' );
 

お客さんにこれまで言われたことがあるわけじゃないけど、

「wordpressいれたらIEで画像が変!」っていわれたときもちょっと思い出してみても良いかもね。

 

wordpressをディレクトリ内にインストールして親(ルート)にページを吐き出させるやりかた

wordpressをサーバーにインストールするとき、管理上
「wp」とか「admin」とかいったディレクトリ内にwordpressのソースたちをアップしてインストールしたい。

http://nyannyan.comというサイトの管理ページが
http://nyannyan.com/adminにしたい、という感じ。

ディレクトリもスッキリするし、お客さんにもわかりやすいのでこうしたい。

でもwpって、初期状態だと、インストールした先がトップページになっちゃう。
http://nyannyan.com/adminにインストールしたら
http://nyannyan.com/adminがトップになっちゃうね。


なので、トップをちゃんとルートの
http://nyannyan.com/
にするための手順をメモ。

といっても超簡単。

まずは、/adminにインストールされてる状態でwp管理ページにログインして


①設定をクリックして、「サイトアドレス(URL)」がhttp://nyannyan.com/adminになってるので、adminをとっぱらってhttp://nyannyan.comにする。

②FTP接続し、
admin/にある2つのファイルをダウンロードしてくる。
・.htaccess
・index.php

③ダウンロードしたindex.phpをエディタでひらいて
require(‘./wp-blog-header.php’);
というのを見つけ出して
require(‘./admin/wp-blog-header.php’);

に変更する。

④ FTPで2つのファイルとルートディレクトリにアップする。


これでOK.

簡単。



◆固定ページなどが403エラーになったら?

URLを変更した後で、固定ページをみるとエラーになる場合がある。
そんなときは、固定ページで吐き出そうとしているurlのディレクトリがすでに
サーバー内に存在してないか確認する。


http://nyannyan.com/about/

がエラーになったとしたら、

aboutというディレクトリがサーバー内で作られちゃってないか確認。
作られちゃってたら削除する。

最初に静的にhtmlをつくって運用している場合などはディレクトリが残っている場合が多いから、バックアップをとったうえで、ちゃんと削除する。

するとwordpressが吐き出すページとバッティングせずにちゃんと表示されるようになる。



 

wordpressで記事一覧を出す

wordpressで記事一覧のタイトルを出したいとき。

<?php
$posts = get_posts('numberposts=0');
global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<?php the_title(); ?>
<?php endforeach; endif;?>

numberposts=0

を5とかにすれば5件でる。 

記事の日付も出したいときは
<?php the_time('Y年m月d日'); ?>
を使う。 

記事へリンクをつけたいときは
<a href="<?php the_permalink(); ?>">
を使う。

 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ