WordPress 独自テンプレートでよく使う関数など

投稿関連

<?php 
//公開日時
the_time("Y年m月d日"); ?>

カテゴリ関連

カテゴリ情報取得

カテゴリID、スラッグ、カテゴリ名など、カテゴリ情報をまとめて取得

$cat = get_the_category();
$cat = $cat[ 0 ];

//取得情報を表示
print_r($cat);

//カテゴリ名表示
echo $cat->name;

//カテゴリリンクURL
echo get_category_link( $cat->term_id )

カテゴリID取得

//カテゴリIDを取得する
$cat_id = get_query_var( 'cat' );

カテゴリリンクURLを取得

$url = get_category_link( カテゴリID );

親カテゴリか、その親の子カテゴリに属する場合の分岐

functions.phpに以下を追記

/*特定のカテゴリかその子カテゴリに分類された投稿で条件分岐する*/
function post_is_in_descendant_category( $cats, $_post = null ){
foreach ( (array) $cats as $cat ) {
$descendants = get_term_children( (int) $cat, 'category');
if ( $descendants && in_category( $descendants, $_post ) )
return true;
}
return false;
}

カスタムフィールド関連

<?php
//カスタムフィールドの値を取得・表示
echo get_post_meta( $post->ID , 'price' , true );
?>

画像関連

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/path.jpg">

文字関連

<?php 
//抜粋文字数制限
echo mb_substr( get_the_excerpt(), 0, 80 ) . ' ...'; ?>
//function.phpで設定する場合
function twpp_change_excerpt_length( $length ) {
  return 50; 
}
add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );

関数関連

ショートコードを追加

<?php echo do_shortcode('[ショートコード]'); ?>

CSS関連

単語の途中で改行しない

/* 日本語の改行設定 */
overflow-wrap: break-word;
word-break: keep-all;

/* ドロップシャドウ 影をつける */
filter: drop-shadow( 6px 4px 0 #ddd);

/* 背景画像を複数設置 */
background-image: url(images/reasonBg01.png), url(images/reasonBg02.png);
background-position: top 40% left 0, top 40px right 0;

/* reCAPTCHA(リキャプチャ)を非表示にする */
.grecaptcha-badge { visibility: hidden; }
 

ツール関連

CSSグラデーション ジェネレータ

CSS Gradient

CSSやSCSSの整形

https://lab.syncer.jp/Tool/CSS-PrettyPrint/

CSSをSCSSやSCSSに変換

CSS 2 SASS/SCSS CONVERTER

LINEのOGP設定を更新する

https://poker.line.naver.jp/

cssのfilterやtransformの設定

http://ds-overdesign.com/filter/

jQuery関連

windowやdiv要素の高さを取得

//windowやdiv要素の高さを取得して、ほかの要素に反映させる
<script>
$(window).on('load', function() {
    var header_height = $('#header').outerHeight();
    console.log(header_height);

    var win_height = $(window).height()  // 画面の高さをpxで取得
    console.log(win_height);
    
    $('#mainImg').css('height',win_height);
});

</script> 

windowサイズで場合分け

<script>
var windowSize = $(window).width();
    if (windowSize > 780) {}
</script>

ナビの位置を過ぎたらwindow上部に追従させる

  <script>
	$(window).on('load', (function() {
  let target = $("#nav").offset().top;
  $(window).on("scroll", function() {
    let currentPos = $(window).scrollTop();
    if(currentPos > target) {
      $("#nav").addClass('fixed');
    } else{
      $("#nav").removeClass('fixed');
    }
  });
}));
</script>
/* CSS */
.fixed{ position: fixed; top:0; left: 0; width: 100%; z-index: 99;}
投稿日:
カテゴリー: WordPress

コメントする

メールアドレスが公開されることはありません。

CAPTCHA