クリエイター：コーディング備忘録ブログ – クリエイター：コーディング備忘録ブログ。クレアネットスタッフがまとめています。

slickでスライダー画像部分とテキストの切り離し

2019/521 sugita コメントする

slickでスライダー画像部分とテキストの切り離す方法です。

スライダー部分は単純な画像スライドで、その画像に対するテキストなどはフェードインで表示させたい場合など、
表示のさせ方は別々で連動させたい場合などに使えます。

slickGoToで指定したスライドの番号に飛ばすことができます。
これを利用して、例えば3番目に飛ばしたい場合は下記のようになります。

$('.slider').slick('slickGoTo', 3);

1	$('.slider').slick('slickGoTo', 3);

そこで連動させたい要素の数を「var index = $thumb.index(this);」で取得し
前の記述の「3」のところに「index」を入れて下記のようにします。

$('.slider').slick('slickGoTo', index);

1	$('.slider').slick('slickGoTo', index);

■HTML

<div class="slide-inner">
            <div class="slider">
              <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div>
              <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div>
              <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div>
              <div class="slider_item"><img src="https://placehold.jp/150x150.png" width="200" ></div>
            </div>
            <div class="profile-text">
              <div class="thumbnails_text current">テキスト</div>
              <div class="thumbnails_text">テキスト</div>
              <div class="thumbnails_text">テキスト</div>
　　　　　　　 <div class="thumbnails_text">テキスト</div>
            </div>
            <div class="thumbnails">
              <div class="top">
                <div class="thumbnails_item current"><img src="https://placehold.jp/150x150.png" alt=""></div>
                <div class="thumbnails_item"><img src="https://placehold.jp/150x150.png" alt=""></div>
                <div class="thumbnails_item"><img src="https://placehold.jp/150x150.png" alt=""></div>
                <div class="thumbnails_item"><img src="https://placehold.jp/150x150.png" alt=""></div>
              </div>
            </div>

</div>

</div>

</div>

■JS

$(function(){
  var slider = function() {
  var $slider = $('.slider');
  if ($slider.length < 1) { return; }

  var $text = $('.thumbnails_text');
  var $thumb = $('.thumbnails_photo');

  //オプション
  $slider.slick({
    arrows: true,
    fade:true,
    speed: 800,
  });

  $thumb.on('click', function(e){
    e.preventDefault();
    var index = $thumb.index(this);
    $slider.slick('slickGoTo', index);
  });

  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  	var currentClass = 'current';
    $thumb.removeClass(currentClass)
      .eq(nextSlide).addClass(currentClass);
    $text.removeClass(currentClass)
      .eq(nextSlide).addClass(currentClass);
  });
};

slider();
});

$(function(){

var slider = function() {

var $slider = $('.slider');

if ($slider.length < 1) { return; }

var $text = $('.thumbnails_text');

var $thumb = $('.thumbnails_photo');

//オプション

$slider.slick({

arrows: true,

fade:true,

speed: 800,

});

$thumb.on('click', function(e){

e.preventDefault();

var index = $thumb.index(this);

$slider.slick('slickGoTo', index);

});

$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){

var currentClass = 'current';

$thumb.removeClass(currentClass)

.eq(nextSlide).addClass(currentClass);

$text.removeClass(currentClass)

.eq(nextSlide).addClass(currentClass);

});

};

slider();

});

カスタムフィールドの値で投稿一覧をソートする

2019/517 sugita コメントする

Advanced Custom Fieldsなどで作成したキーに入力された内容で、
表示させる、投稿一覧の順を並べ替えることができます。

例）Advanced Custom Fieldsでpriceというフィールドをつくり、投稿一覧で、投稿日時順ではなく、価格順に降順で表示させたい場合
$args = array();に以下の記述を追加することで実現可能です。

         'orderby' => 'meta_value_num',//カスタムフィールドの値で並び替える
         'order'   => 'DESC', // DESC降順　ASC昇順
         'meta_key' => 'price',//カスタムフィールドのキーを指定します。

'orderby' => 'meta_value_num',//カスタムフィールドの値で並び替える

'order' => 'DESC', // DESC降順　ASC昇順

'meta_key' => 'price',//カスタムフィールドのキーを指定します。

xサーバーでphpをhtmlで動作させる

2019/57 sugita コメントする

静的htmlでwpの新着などを表示させるとき、wordpressの関数を外部から使うには、wp-load.phpをインクルードすればよいですが、
htmlファイルでphpを動作させる場合は、.htaccessの設定も必要です。

実際に読み込むにはheadの一番上に、インクルード用の記述をして、

require_once( dirname(dirname( __FILE__ )) . '/wp-load.php' );

1	require_once( dirname(dirname( __FILE__ )) . '/wp-load.php' );

PHPを拡張子.htmlのファイル内で動作させるため。.htaccessに以下を記述します。

AddHandler fcgid-script .html

1	AddHandler fcgid-script .html

WordPressの固定ページのURLに.htmlをつける

2019/423 sugita コメントする

静的HTMLサイトからWordPressへのリニューアル時や、wordpressと共存させる場合などに、
.htmlの拡張子が付いたり付かなかったりバラバラになることがあります。

そのような場合、
function.phpに下記を記述すれば固定ページのurlの末尾に.htmlの拡張子を付与することができます。

add_action( 'init', 'mytheme_init' );
if ( ! function_exists( 'mytheme_init' ) ) {
function mytheme_init() {
global $wp_rewrite;
$wp_rewrite->use_trailing_slashes = false;
$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
// flush_rewrite_rules( false );
}
}

add_action( 'init', 'mytheme_init' );

if ( ! function_exists( 'mytheme_init' ) ) {

function mytheme_init() {

global $wp_rewrite;

$wp_rewrite->use_trailing_slashes = false;

$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';

// flush_rewrite_rules( false );

}

サイトのURLを統一したいとき使える方法です。

WordPress ログイン画面をカスタマイズ

2019/422 sugita コメントする

WordPressではログイン画面のレイアウト変更など設定を自由に変更可能です。

基本的にfunction.phpにログイン画面でCSSの指定が効くように記述するだけです。

function login_page() { ?>

  <style>

    .login {
      /*ログイン画面の設定*/
    }
  .login #login h1 a {
       /*ログイン画面のロゴの設定
     }
  </style>

<?php }

add_action( 'login_enqueue_scripts', 'login_page' );

function login_page() { ?>

<style>

.login {

/*ログイン画面の設定*/

}

.login #login h1 a {

/*ログイン画面のロゴの設定

}

</style>

<?php }

add_action( 'login_enqueue_scripts', 'login_page' );

Styleにロゴに対する設定をするだけでも、ログイン画面に見栄えをオリジナルに設定が可能ですし、
背景の変更も可能なので、サイトにオリジナリティを出したい時に設定しておきたいですね

画像をテキスト化してくれるサービス

2019/416 sugita コメントする

画像に記載されている文字をテキストとして抽出してくれるサービスの紹介です。

Online OCR

会員登録なしで利用でき、46ヶ国語に対応しています。

書き出し形式は以下の３つです。

・Microsoft Excel
・Microsoft Word
・プレーンテキスト

画像の解像度に左右されたり、文字が間違って抽出される部分はありますが、
長文など時間がかかりそうな手打ち作業よりも、ちょっとした修正だけで、書き出せるので、
画像の文字起こしなど時間のかかりそうな作業の場合すごく役立ちそうですね

gnaviにカスタム投稿記事リストを表示

2019/410 sugita コメントする

gnaviなどにカスタムカテゴリーで作成した記事をリストで表示させる方法です。

使用場面の例では、
「product」というカスタム投稿で、商品情報などが登録された記事を投稿する場合や
スタッフ紹介など人物の登録をしてリストでスタッフ一覧を表示させたい場合などです。

‘numberposts’の-1(-1で全件表示)の数字を変更すれば、好きな数を新しい順から引っ張ってくることが可能です。
post_type’ => ‘product’,には任意で作詞したカスタム投稿名、単に投稿ならpostで指定可能です。

<ul id="gnav">
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>page01">page01</a></li>
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>page02">page02</a></li>
  <div class="subnav">
    <ul>
      <?php
		$object = get_post_type_object(get_post_type());
		$posts_array_2 = get_posts( array(
		'numberposts' => -1,
		'post_type' => 'product',));
		foreach($posts_array_2 as $my_post):
		?>
      <li><a href="<?php echo $my_post->guid; ?>"><?php echo $my_post->post_title; ?></a></li>
      <?php endforeach; wp_reset_postdata(); //クエリのリセット ?>
    </ul>
  </div>
</li>
</ul>

<ul>

<?php

$object = get_post_type_object(get_post_type());

$posts_array_2 = get_posts( array(

'numberposts' => -1,

'post_type' => 'product',));

foreach($posts_array_2 as $my_post):

<li><a href="<?php echo $my_post->guid; ?>"><?php echo $my_post->post_title; ?></a></li>

<?php endforeach; wp_reset_postdata(); //クエリのリセット ?>

</ul>

</div>

</li>

</ul>

Urlのアンカー#idを取得する

2019/48 sugita コメントする

外部リンク先のアンカー(#id)でスクロールや特定の処理をさせたい場合、
Url末尾にある#idの値を取得することで、可能になります。

$function(){
  //URLのハッシュ値
  var url = location.hash;
  //ハッシュ値があればページ内スクロール
  if(urlHash) {
   //URLハッシュ値があった時の処理
  }
});

$function(){

//URLのハッシュ値

var url = location.hash;

//ハッシュ値があればページ内スクロール

if(urlHash) {

//URLハッシュ値があった時の処理

}

});

簡単にシェアボタンを設置する方法

2019/43 sugita コメントする

twitterやfacebookのオリジナルのシェアボタンを簡単に作成する方法です。

画像をそのままシェアボタンに設定したい場合、aタグで設定することで簡単に設定が可能です。

<a href="http://twitter.com/share?url=[URL]">Twitter</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]">Facebook</a>

<a href="http://line.me/R/msg/text/?[URL]">LINE</a>

<a href="http://twitter.com/share?url=[URL]">Twitter</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]">Facebook</a>

.htaccessでBASIC認証を解除する

2019/328 sugita コメントする

.htaccessで指定したのファイルやディレクトリのみベーシック認証を解除する方法です。

開発時や未公開時などに便利なBASIC認証ですが、一部だけ公開したい場合があります。
そのような場合は解除したいディレクトリ階層に下記を記述した.htaccessを設置するだけです。

Satisfy any
order allow,deny
allow from all

Satisfy any

order allow,deny

allow from all

上ではディレクトリごと解除になりますが、

ファイルを指定して書く場合はこのようになります。

<Files "〇〇.html">
Satisfy any
order allow,deny
allow from all
</Files>

Satisfy any

order allow,deny

allow from all

</Files>