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

2022年11月16日 web関連 • WordPress • jQuery・javascript • php

投稿関連

ページID 取得・表示

<?php $post_id = get_the_ID ( ) ;
echo $post_id; ?>

リンク取得・表示

<a href="<?php echo get_permalink( 99 ); ?>">リンクテキスト</a>

親ページの情報を取得・表示

<?php
  $parent_id = $post->post_parent; //親ページのIDを取得
  echo get_post($parent_id)->post_name; //スラッグ
  echo get_post($parent_id)->post_title; //タイトル
  echo get_post($parent_id)->post_date; //作成日
  echo get_post($parent_id)->post_excerpt; //抜粋
  echo get_post($parent_id)->post_content; //本文
?>

<?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 )

カテゴリ説明文表示

<?php
  if( category_description() ) {
    echo category_description();
  }
?>

カテゴリID取得

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

カテゴリリンクURLを取得

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

リンクを設定

<a href="<?php echo get_category_link( 56 ); ?>">姶良市</a>

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

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;
}

カテゴリ2かその子カテゴリに属する場合に表示させる

<?php if( in_category(2) || post_is_in_descendant_category(2)):?>
ここに表示内容
	  <?php endif; ?>

カスタムフィールド関連

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

画像関連

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

画面サイズで画像切り替え

<picture>
      <source media="(max-width: 767px)" srcset="<?php echo get_stylesheet_directory_uri(); ?>/images/mainImg@2x.jpg">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/mainImg.jpg">
    </picture>

文字関連

句読点やカッコなどを文字詰め・カーニング

font-feature-settings: "palt";

日本語の自動改行をいい感じにするCSS

overflow-wrap: break-word;
word-break: keep-all;

<?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('[ショートコード]'); ?>

PHP関連

テンプレートファイル内でショートコードを実行する

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

時間指定して公開・非公開のタイマーを設定する

<?php date_default_timezone_set('Asia/Tokyo'); //東京時間にする?>
			  <?php echo date('Y-m-d H:i:s'); ?>
<?php if (date('Y-m-d H:i:s') > '2023-02-04 20:00:00') :?>
<!-- 指定日時を超えた場合 公開する内容 -->
<?php else:?>
<!-- その他の場合 -->
<?php endif;?>

CSS関連

bodyタグに任意のクラスをつける

<?php
//front_page以外に .not_home クラスをつける
if( is_front_page()){
	$body_class = "";
}else{
	$body_class = "not_home";
} ?>

<body <?php body_class( $body_class ); ?>>

Google reCAPTCHA ロゴ消す

.grecaptcha-badge { visibility: hidden; }

単語の途中で改行しない

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

/* テキストにマーカーをひく */
 background: linear-gradient(transparent 50%, #fff100 0%); line-height: 260%;
/* ドロップシャドウ 影をつける */
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; }
 
/* flex gap 10pxの場合の子要素のサイズ設定*/
width: calc((100% - 10px) /2);

ツール関連

jQuery関連

スクロールが指定位置を超えたら表示

//スクロールが指定位置を超えたら表示
$(function() {
	var topBtn = $('#page-top');	
	topBtn.hide();

	$(window).scroll(function () {
		if ($(this).scrollTop() > 500) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});

    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});

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;}

スクロールが止まってから一定時間後に表示

$(function(){
  var header= $('#header');
  var timer;
  
  $(window).scroll(function() {
    //スクロール開始するとheaderを非表示
    header.removeClass('is-fixed');
    
    //スクロール中はイベントの発火をキャンセルする
    clearTimeout(timer);
    
    //スクロールが停止して1秒後にイベントを発火する
    timer = setTimeout(function() {
      //スクロール位置を判定してページ上部のときはボタンを非表示にする
      if($(this).scrollTop()) {
		 
        header.addClass('is-fixed');
      }else{
        header.removeClass('is-fixed');
      }
    }, 1000);
  });

フェードインで表示させる

$(function () {
  var header = $('#header');
  head_wrapOffsetTop = header.offset().top;
  var timer;
  $(window).scroll(function () {
    //スクロール中はイベントの発火をキャンセルする
    clearTimeout(timer);
 
 //スクロールされているとheaderを非表示
   if ($(this).scrollTop() > head_wrapOffsetTop) {
      //header.css('display','none');
      header.hide();
      //スクロールが停止して1秒後にイベントを発火する
      timer = setTimeout(function () {
        header.addClass('is-fixed');
        header.fadeIn('slow');
      }, 1000);
    } else {
//スクロール位置を判定してページ上部のときはheaderを表示する
      header.css('display', 'block');
      header.removeClass('is-fixed');
    }
  });
});

ピックアップ記事

[PHP]公開時間を設定

2022年12月08日 web関連 • php

[php] <?php date_default_timezone_set('Asia/Tokyo'); $datetime = date('Y-m-d H:i'); ?> <?php if($datetime >= '2022-12-08 12:00'): ?> ここに表示内容 <?php endif; ?> [/php]

表示中のカテゴリIDを取得

2011年11月28日 WordPress

[php] $cat = get_query_var('cat'); [/php] top web hosting los angeles divorce lawyers…

この記事の続きを読む

WordPress のWP-DBManager プラグインで自動的にデータベースのバックアップ

2012年01月28日 WordPress

初期設定まずは、WP-DBManagerをダウンロードし、プラグインフォルダに入れたら、管理画面上から有効化します。すると管理画面のメニューに「Database」というメニューが追加されるので、その中の「Backup DB」を開きます。そこに英語で「.htaccess」関係の警告が出てると思うので、指示の通りの場所にある「htaccess.txt」を「.htaccess」にリネームして…

この記事の続きを読む

WordPress flickrRSSで画像をランダムに表示させる

2011年05月28日 WordPress • php

このサイトでは、Instagramから投稿した画像を同時にFlickrにも投稿し、その画像を flickrRSS というWordPressのプラグインを使って、Flickrから呼び出して、表示させています。デフォルトでは、RSSというだけあって、投稿日時順に表示されてしまいます。これだと、毎回画像の並びが同じで、おもしろくないので、ランダムに表示させています。ランダムにするには、flic…

この記事の続きを読む

指定カテゴリに属する記事の一覧を表示

2011年11月30日 WordPress

$categorysの配列を複数指定することで、複数のカテゴリから記事の一覧を取得することが可能です。 [php] <?php $categorys = array(27); for ($i=0; $i<count($categorys); $i++) : ?> <?php query_posts('cat='.$categorys[$i]); if (have_post…

この記事の続きを読む

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

投稿関連

カテゴリ関連

カテゴリ情報取得

カテゴリ説明文表示

カテゴリID取得

カテゴリリンクURLを取得

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

カスタムフィールド関連

画像関連

画面サイズで画像切り替え

文字関連

句読点やカッコなどを文字詰め・カーニング

日本語の自動改行をいい感じにするCSS

関数関連

ショートコードを追加

PHP関連

テンプレートファイル内でショートコードを実行する

時間指定して公開・非公開のタイマーを設定する

CSS関連

bodyタグに任意のクラスをつける

ツール関連

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

CSSやSCSSの整形

CSSをSCSSやSCSSに変換

LINEのOGP設定を更新する

cssのfilterやtransformの設定

jQuery関連

スクロールが指定位置を超えたら表示

windowやdiv要素の高さを取得

windowサイズで場合分け

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

スクロールが止まってから一定時間後に表示

フェードインで表示させる

この投稿へのコメント

コメントを残す

ピックアップ記事

カテゴリー

タグ

graffiti on the web

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