WordPressカスタマイズ

luminousを使ったギャラリーの覚書

Posted on by croquis

luminousを使って、

lightboxを使った時に、rel=”lightbox[***]”　を使って、１ページ内に複数のギャラリーを設置

と同じようなことをするには 

<a href="--------" class="luminous-***" data-set="***"><img -------></a>
WordPressの場合は、***の部分をpostIDにするなりして、まとめたい画像を同じ文字でそろえる。 
var luminousElem_array = [];


//luminousで始まるclassの取得
let luminousElem = document.querySelectorAll(`[class^='luminous']`);
if( luminousElem !== null ) {
    luminousElem.forEach(function(elem) {
   //data-setの値で配列作成
       luminousElem_array.push(elem.dataset.set);
   
});
//luminousElem_arrayから重複分を削除
const newluminousElem_array = luminousElem_array.filter((element, index) => luminousElem_array.indexOf(element) === index);
newluminousElem_array.forEach(function(elem) {
//LuminousGalleryを作成
new LuminousGallery(document.querySelectorAll('.luminous-'+elem));
});
}

適当なので、もっと効率の良い方法がありそうです。

 

WordPressのCSSが保存できない

Posted on by croquis

久しぶりに一般に配布されているWordPressのテーマを修正する機会があったのですが、なぜか外観のカスタマイズにある 追加CSS が保存できない。

普段は、UNDERSCORES https://underscores.me/ を利用した当社オリジナルのテーマでサイトを作成するので原因がちょっと新鮮だったので記録しておきます。

 

原因は、２つ

1.間違ったCSS文法は保存できない！

2.一部の記号は保存できない!

 

解決策は、

スペルミスなど間違わないことと。全角も要注意

２番目の原因は、

=　

などが受け付けないようで、

html[lang=”ja”] body{}

などは、、保存できません。

 

面倒がらずに、function.phpに　wp_enqueue_style　を使って

追加の　cssファイルの指定をして、そこに書いておくのが無難です。

なんか、初心に戻った感じで少し新鮮なトラブル解決でした。

 

 

ACF proの画像フィールドで配列を返す場合の注意

Posted on by croquis

ACFで画像フィールドは、デフォルトで配列を返してくれますが、
グループや繰り返しフィールを利用した際に、
画像フィールドに、同じフィールド名を使用した場合、
重複する２つ目以降は、配列ではなく、画像IDしか返してくれません。

１つ目は、ちゃんと、配列を返してくれます。

これは、「仕様」なのか「バグ」なのか・・・

グループを作って、複写して利用する場合などは注意が必要。
多分、ファイルフィールドも同じ状況。

単一階層の場合は、当然フィールド名はかぶることが出来ない。
(当然、値は上書きされる）

フィールドラベル　「画像A」 　　/　フィールド名　[‘img_a’]

フィールドラベル　「イメージA」 　　/　フィールド名　[‘img_a’]　駄目×

 

グループの場合、２階層目のフィールド名はかぶっても大丈夫
（・・・この考え方が間違ってる？）

[‘groupA’][‘img_a’]　配列が返される

[‘groupB’][‘img_a’]　画像IDが返される

 

 

仕方がないので、こんな感じに、配列の場合と、画像IDで返ってくる場合に分けてみた

$img = get_field(‘groupA’)[‘img_a’];
$src=”;
if(is_array($img)):
$src= $img[‘url’];
else:
$src = wp_get_attachment_image_src( $img, ‘large’ )[0];
endif;
echo  ‘<img src=”‘.$src.‘”  />’;
ファイルの時は、

$src = wp_get_attachment_url( $img);

HOME