graffiti on the web ブログやサイトなんかにtwitterウィジェットを使う事が多くなりましたが、ウィジェットの背景を透明にしないとサイトにマッチしないなぁという場合もあるかと思いますので、その方法を書いておきます。簡単ですが。。。（笑）
theme: { shell: { background: 'none', …
目次
投稿関連
ページ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 GradientCSSやSCSSの整形
https://lab.syncer.jp/Tool/CSS-PrettyPrint/CSSをSCSSやSCSSに変換
CSS 2 SASS/SCSS CONVERTERLINEの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');
}
});
});
この投稿へのコメント
コメントはまだありません。