2022年11月16日 web関連WordPressjQuery・javascriptphp

投稿関連

ページ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);

ツール関連

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関連

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

//スクロールが指定位置を超えたら表示
$(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');
    }
  });
});

この投稿へのコメント

コメントはまだありません。

コメントを残す

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

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

Twitter for Mac’s developer consoleの設定

2014年07月18日 web関連twitter API
Twitter for Mac’s developer consoleの設定
ちょうど設定してみたので、メモ。 まだ触ってないので詳しく分かりませんが、Twitter for Mac's developer consoleというのは、Twitter APIのテストが可能なのようです。 WEB版のコンソールもありますが、Twitter for Mac's developer consoleの方がサクサク動くらしいです。 DEVサイトにログイン、APP登録 まず…
「Twitter for Mac’s developer consoleの設定」をはてなブックマークに追加

親カテゴリIDを取得・表示

2011年11月28日 WordPress
現在表示中のページ(記事)の親カテゴリIDを表示させます。 [php] <?php // 現在のカテゴリ-を配列取得 $cat_now = get_the_category(); // 親の情報を$cat_nowに格納 $cat_now = $cat_now[0]; //category_parentを$parent_idに格納 $parent_id = $cat_now->cate…
「親カテゴリIDを取得・表示」をはてなブックマークに追加

カテゴリ名を表示する

2011年11月28日 WordPress
[php] <?php single_cat_title(); ?> [/php]
「カテゴリ名を表示する」をはてなブックマークに追加

PHP 表示中のURLを取得

2011年07月25日 php
PHPで、表示中のURLのクエリまで全て取得したい場合に有効な方法です。 単純にドメインやindex.phpなどの実行ファイル名までであれば、以下のようにすれば取得できます。 …
「PHP 表示中のURLを取得」をはてなブックマークに追加

PHP 短縮URLのAPIから短縮後のURLを取得

2011年08月09日 web関連phptwitter API
twitterに関連したwebサービスを作っているとURL短縮の必要が出てくることが多々あります。 そんな時には、有名なurl短縮サービスを利用することになると思うのですが、代表的なbit.ly、TinyURLを利用する方法です。 …
「PHP 短縮URLのAPIから短縮後のURLを取得」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy