1. /
  2. Memo

Memo

ほぼcssのみでアニメーションするライブラリが愛おしい

http://mynameismatthieu.com/WOW/

百聞は一見に如かず。
ぜひリンク先をご覧いただきたい。
楽しいアニメーションが1つのライブラリでcssのみで制御できるという素晴らしいもの。

HOW TOの方に分かりやすく解説してあるので、そちらをご覧いただくほうが本当に早い。
http://mynameismatthieu.com/WOW/docs.html

headにスタイルを読み込む

<link rel="stylesheet" href="css/animate.css">

ライブラリを読み込む

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

これでセットアップは完了。
 
 

<div class="wow"></div>

wowがライブラリを使う宣言になっているのでjsに設定する必要はないです。
あとはお好みで、
 

<div class="wow bounceInUp">ほげー</div>

としてあげれば、ぼよーんと跳ねるアニメーションが！
 

超かんたんですね。
先ほどのサイトのトップページがライブラリ一覧になるので、この動き使いたい！
と思ったらコンソールを覗いてみて下さい。
細かいカスタマイズもできるので、JSマスターの方はカスタマイズに挑戦してみても良いかと思います。
 

【おまけ】
data-wow-delay=”0.5s”
で、表示スピードの調節ができます。

event managerでイベント一覧をカスタマイズしたい

したいよね。

まずやり方。
1.event manager　→　設定　→　ページ設定　→　イベント一覧/アーカイブで、イベント一覧ページのページ指定を【イベントページを指定しない】に変更する。
2.新しい固定ページなどを作る。
3.ショートコードをコピペして入れる。
4.publish。
これでイベント一覧ページのカスタマイズの土台ができた。

ショートコードはこれ。

[events_list category_id="X"]

カテゴリーを指定したい時は、category_id=”X”のX部分をカテゴリーのID番号に書き換えてください。

このサイトにたどり着いた方はおそらくショートコード入れても表示されないよ！？っていう方だと思います。
上記の方法でも多分モヤッとしているのではないかと思いますので解説。

【ここから前提】
event managerをインストールした際にevent manager側で必要なページを自動的に生成してくれています。
なので、そのページのページスラッグを書き換えたところでevent manager側のページ生成IDは変わらないので、event managerの保有しているページということになります。
【/前提おわり】

本家のサイトの方にショートコードの例などがありますので、それらを参考にざくざくとカスタマイズしてみてください。
本家のショートコードの例はこちら

カスタマイズの呼び出しは、管理画面側の
event manager　→　書式設定
に準じています。
この場所にプレースホルダーをほいほい放り込み、HTMLを追加削除することで変更されます。
・イベント一覧
・イベント詳細ページ
・イベントの抜粋
（その他表示に関わるもの全て）

ショートコードはwordpressの仕様に準じているので、慣れている方はテンプレートにPHPでカスタマイズしていったほうが早いかもしれません。

Facebookで画像を劣化させない

通常の写真: 720、960、2048ピクセル(幅)
カバー写真: 851×315ピクセル
この仕様でアップすれば劣化しない（し難い）とのこと。

なるべくデカい画像で、カバー写真に至っては縦横比があっている事が前提。
Facebookページではカバー写真は顔となるものなので、なるべく印象は良くしておいたほうがいいですよね。

events managerで地図が表示されなくなったら


event manager
http://wp-events-plugin.com/

APIの確認もした。
API登録時にドメイン登録もした。
所有者証明もした。
WPの管理画面からAPIキーの登録もした。
Google Maps 連携を有効にしますか？も「はい」に設定した。

それでも管理画面には表示されているのにフロント（見えているページ）側に表示されないという時試してみて欲しい。

マップの幅の初期値をピクセルに戻す。

これ。
もし％で表示されなくなった人は試してみて欲しい。これで直ります。

どうしても％に設定したい人は、cssでem-location-map-containerのクラスを!importantで無理やり％に直してしまえばいいと思います。

<style>
.em-location-map-container {
width:100%!important;
height:400px!important; /* 縦のサイズはお好みで */
}
</style>

envinceのスライダーで表示させるカテゴリーを限定する

※かならずデータのバックアップを取ってから作業してください。
※テーマ編集は自己責任でお願いします。

envince/inc/widgets
の中のwidgets.phpを編集

221行目の、

<?php
$slide_counter = 0;
while( have_posts() ): the_post();
$slide_counter++;
if( $slide_counter%5 == 1 ){
?>

これの前に、

<?php query_posts("cat=1,5,7"); ?>

これを入れる。

<?php query_posts("cat=1,5,7"); ?>
<?php
$slide_counter = 0;
while( have_posts() ): the_post();
$slide_counter++;
if( $slide_counter%5 == 1 ){
?>

こうなる

表示クエリを渡す。
カテゴリIDはカンマ区切りで。
ここを限定すると、wordpress側のカスタマイズからは変更できなくなります。
カテゴリIDは、投稿のカテゴリからカテゴリ名にマウスオンすると表示される番号から取得する。