ブログ｜ぼうびろく

30 July

nth-of-typeの使い方　意外と知らないセレクタ

:nth-of-type(odd)　･･･　奇数番目の要素に適用
:nth-of-type(2n+1)　･･･　奇数番目の要素に適用
:nth-of-type(even)　･･･　偶数番目の要素に適用
:nth-of-type(2n)　･･･　偶数番目の要素に適用
:nth-of-type(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-of-type(3n+1)　･･･　1,4,7,10…番目の要素に適用
:nth-of-type(-n+3)　･･･　最初の3つの要素に適用
:nth-child(n+3)　･･･　最初の3つの要素以外に適用

http://d.hatena.ne.jp/smartboy/20131229/p1
http://weboook.blog22.fc2.com/blog-entry-268.html

29 July

welcart　すべて売り切れたときのみ「売り切れ」表示にする

今までは商品一覧ページに

<?php usces_the_itemZaiko(); ?>

と書いてありました。これがデフォか書き足したのかは忘れました･･･。
これだとSKUが複数の場合、一番上のSKUが「売り切れ」になると
他のSKUの在庫が残っていても商品一覧ページでは「売り切れ」と出てしまいます。

SKUの順番を変えればその表示はなくなりますが、
面倒くさいし順番がバラバラになってしまいます。
そこで開発フォーラムを検索したところ下記を見つけました。

[解決済み] 売り切れ表示のカスタマイズについて
http://goo.gl/s75BU9

一つでも在庫がある場合以外のとき（＝全ての在庫がない場合）、「売切れ」と表示する
<?php if ( !usces_have_zaiko_anyone() ) : ?>売切れ
<?php endif; ?>

usces_have_zaiko_anyoneは
「商品登録されているSKUのうちひとつでも在庫がある場合にtrueを返す」
というタグらしいです。
!　で「それ以外」を表します。

25 July

アドバンスドカスタムフィールド「Repeater Field」の表示を逆にする　ワードプレス

<?php $rows = get_field('gallery');?>
<?php if($rows):?>
<?php $rows = array_reverse($rows);?> // array_reverse();で配列の逆表示

（ループ内には入れないけどpage.phpに直接書きこみたいものはここへ）
<div>
<?php foreach($rows as $row) {　// ループ開始
        // ループ内で使用する画像の指定
        $attachment_id = $row['gallery_img'];
        $image = wp_get_attachment_image_src( $attachment_id, 'gallery-custom-image' );
      $size = "custom-image"; // (thumbnail, medium, large, full or custom size)
        $imageF = wp_get_attachment_image_src( $attachment_id, 'full' );
        // url = $image[0];
        // width = $image[1];
        // height = $image[2];
?>

<table class="gallery_box">　
<tr>
    <th colspan="2"><a href="<?php echo $imageF[0]; ?>" rel="lightbox"><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>"/></a>
</th>
</tr>
<tr>
    <th>題名</th>
    <td><?php echo $row['サブフィールド名']; ?></td>
</tr>
</table>

<?php } ?> // ループ終わり

</div>

（ループ内には入れないけどpage.phpに直接書きこみたいものはここへ）

<?php endif; ?>

カスタムサイズの画像をサムネイルにして、クリックするとライトボックスでフル画像が開く。
Repeater Fieldは旧→新という順番で追加される。
ドラック&ドロップで順番は自由に入れ替えられるが、一斉に逆順序にしたいこともあるとおもう。
ギャラリーなど画像を並べたら、新しいものを上にしたいのではなかろうか？
そんなとき　array_reverse();　を使って配列を逆にする。

http://www.advancedcustomfields.com/resources/field-types/repeater/
http://ja.forums.wordpress.org/topic/134901?replies=5#post-185382

10 July

WCEX Mobile　トップページの新着ボックスを複数設置する　welcart

有料拡張プラグインWCEX Mobileで、トップページにあるスライドボックスを
さらに増やしたいときのやり方。

「再入荷商品」として新たに設置したい。

前提条件：再入荷商品のカテゴリーを作成し、商品を登録しておく

１、新着商品<div id="home_new">のdivを丸ごとコピーして表示させたい場所に置く。
２、コピーした　<div id="home_new">　のid名を変更→　<div id="sainyuka">
３、コピーした　<div id="home_new">　内の
<span><a href="<?php wcmb_get_category_link_by_slug( 'itemnew' ); ?>"><?php _e('list', 'usces'); ?> »</a></span>　のスラッグ名を再入荷商品のスラッグ名に変更
<?php $reco_ob = new wp_query(array('category_name'=>'itemnew', 'posts_per_page'=>12, 'post_status'=>'publish')); ?>　のカテゴリー名を再入荷商品のカテゴリー名に変更変更
４、style.css内を「home_new」で検索して、出てきた箇所全てに「sainyuka」も加える

これで見た目は完成。
しかし次へ前へのボタンをおしてもスライドしない！
Rotoというjqueryを使って動いていました。
これの設定の仕方は非常に簡単なのでありがたいです。
http://www.skuare.net/2011/09/roto.html

５、コピーした　<div id="home_new">　内の　<div id="listbox" class="roto">　の
id名を変更します→　<div id="listbox2" class="roto">
６、コピーした　<div id="home_new">　内の　<button id="listbox-prev"><button id="listbox-next">　の　id名を先ほど変更したid名と同じにします
→　<button id="listbox2-prev"><button id="listbox2-next">
７、footer.phpを開き、</body>直前にあるScriptに $("#listbox2").roto({ direction: "v" });
と書き足します。

完成です！

おすすめ商品のほうのスライドボックスを増やしたいときは、<div id="home_recommend">
のdivをコピペして上記と同じことをしてください。スライドのScriptは、おすすめ商品で
使われているid名のものをコピペしてid名を変えてください。
縦スライド、横スライドで指定の仕方が違います。
コピペ元→ $("#carousel").roto({ snap: false });

27 June

XAMPP　本番環境をローカルへコピーする

1、XAMPPインストール

http://localhost/xampp/　
XAMPP設定画面にて、MYSQLのパスワードと、ディレクトリ制御のユーザー名パスワードを設定する。このときチェックボックスにチェックをいれて、忘れた時用にパスをローカル保存しておく。

2、データベースを作成する

XAMPPパネルからMYSQLのadminをおしてphpMyAdminへ行く。
先ほど設定したユーザー名「root」、パスワード「＊＊＊＊」を入力する。
新規データベース作成で、本番環境と同じデータベース名を作成する。（まだインポートしない）

3、WP本体をインストールする

http://10251.net/xampp_wordpress_local_install

本番環境と同じバージョンをDLして解凍する。（defaultのフォルダ名はwordpress）
C:￥xampp/htdocs/wordpress
htdocsフォルダ内にWPのフォルダを入れる。
フォルダ名を変えたいときはここで「wordpress」というフォルダ名を変える

http://localhost/wordpress/
（WPのフォルダ名を変えた場合は、wordpressの部分をそのフォルダ名にする）
にアクセスしてWPの新規インストールを開始する。
wp-config.phpの設定を指示に従い入力する。
データベース名、接頭辞は、本番環境と同じものを入力する。
ホスト名は「localhost」

ローカルのサイトタイトル、ローカルWPのユーザー名パスワードを設定する
http://localhost/wordpress/wp-login.php
ローカルWPのログインURL↑

4、本番環境のデータで上書きする

wp-contentフォルダのみ丸ごと上書きする。それ以外はそのまま。

5、データベースをインポートする。

※インポートできるサイズが小さすぎるので持ってくるときは拡張が前提となる
C:￥xampp/php/php.ini　を編集する

post_max_size
upload_max_filesize
を100Mくらいに変更する（変更したらXAMPPパネルの再起動をする）

エクスポートしていたデータベースを、先ほど作った同名データベースへインポートする。
内部のURLが違うのでローカル環境のURLへ変える。

http://oxynotes.com/?p=2152

「接頭辞_options」の一番上にある「siteurl」の編集を押す
そこに書いてある本番環境のURLを
http://localhost/xampp/wordpress
に変更してセーブする（WPのフォルダ名を変えてるときはwordpressの部分を変更）

「接頭辞_options」の次のページにある「home」のURLも同じように編集する

6、トップページ以外404になる

http://webshufu.com/object-not-found-after-setting-wordpress-on-xampp/

私もこの記事と同じ現象になった。
パーマリンクを再設定したら直った。
後述するがここでも.htaccessが邪魔している

もともとXAMPPを以前入れてあったので、それを使おうとしたんだけど、
まずパスがわからない･･･。いつも使ってるようなパスを色々入れてみてもわからない･･･。
以前のパスがわからないのに、新規パスだけ入れてパス変更実行してみたら
「パスが変更されました」とかでてマジ意味わからない･･･。以前のパスの入力欄の意味は･･･

そこからパスを忘れたときのためのことを色々しらべたけれど、
パスをローカル保存してなかったし、コマンドプロンプトを開いてうんたらかんたらとか
全然意味わかんないのでもうやめた

XAMPPを新規インストールすることにした。
しかしここでも注意点がある。以前の情報が残ってると正常にインストールできないため、
アンインストールしたあと残っていたXAMPPファイルを削除する。

なぜWPを丸ごとコピーしなかったかというと、丸ごとコピーしてもどうしても出来なかったから。
.htaccessとかリダイレクトとかが邪魔してもうダメ。
/wp　を消してリダイレクトとかやってると、その設定があるためローカルでもそういうファイルを再現しないとダメってことでしょう？もうめんどくさい。
そもそもwpをドメイン変更で移行するときにもコレの扱いが、どれが本当のアドレスで
どれを入力すればいいんだっけ？っていちいち考えてすごいめんどくさいしイライラした。
もう今後はフォルダに直でいれてバラけて汚くなろうがリダイレクトとか余計なことして、
色々変更したいときに無駄に悩んだりイライラしなくてすむように、
こういうリダイレクトする設定はやめようと思う。
これのせいでURL変更や階層がだるい。

スカイプと同時に使う場合のポート80問題みたいなのもなんか設定した気がするけど
もう忘れたわ･･･

　