memorandum

備忘録

Web制作のための備忘録
HTML/CSS/PHP/jQuery/Javascript

2019.05.13

WordPressのタイトルと本文の文字数制限

タイトルの文字数制限

文字数50で表示

<?php echo mb_substr($post->post_title, 0, 50); ?>

文字数50で制限して、それ以上は省略させる

<?php echo mb_substr($post->post_title, 0, 50).'…'; ?>

文字数100で制限して、100文字以内ならそのまま、100文字以上なら省略させる

<?php
if ( mb_strlen( $post->post_content, 'UTF-8' ) > 100 ) {
  $content = mb_substr( $post->post_content, 0, 100, 'UTF-8' );
  echo $content . '…';
} else {
  echo $post->post_content;
}
?>

本文の文字数制限

本文の文字数を制限して、HTMLタグを削除して表示

タイトルと同様に文字数100で制限して、100文字以内ならそのまま、100文字以上なら省略させる場合はHTMLタグを削除する必要がある。

<?php
if ( mb_strlen( $post->post_content, 'UTF-8' ) > 100 ) {
  $content = mb_substr( strip_tags( $post->post_content ), 0, 100, 'UTF-8' );
  echo $content . '…';
} else {
  echo strip_tags( $post->post_content );
}
?>

本文の文字数を制限して、HTMLタグを削除、さらに改行コードも削除して表示

HTMLタグを削除しただけでは、改行されて表示されてしまい見た目が良くない場合は以下のコードで表示させる。

<?php
if ( mb_strlen( $post->post_content, 'UTF-8' ) > 100 ) {
  $content = str_replace( '\n', '', mb_substr( strip_tags( $post->post_content ), 0, 100, 'UTF-8' ) );
  echo $content . '…';
} else {
  echo str_replace( '\n', '', strip_tags( $post->post_content ) );
}
?>
2018.10.12

jQueryでタブ切り替えを設置(複数設置も対応)

プラグインを使用せず、jQueryでタブ切り替えを設置する場合は以下のようにすれば簡単に設置が可能。

【HTML】

<ul class="tabMenu">
  <li class="active">タブメニュー</li>
  <li>タブメニュー</li>
  <li>タブメニュー</li>
</ul>
<div class="tabContent active">
  <p>ここにコンテンツ</p>
</div>
<div class="tabContent">
  <p>ここにコンテンツ</p>
</div>
<div class="tabContent">
  <p>ここにコンテンツ</p>
</div>

【jQuery】

$(function () {
  $('.tabContent.active').fadeIn();
  $('.tabMenu li').click(function () {
    var num = $('.tabMenu li').index(this);
    $('.tabContent').removeClass('active').fadeOut();
    $('.tabContent').eq(num).addClass('active').fadeIn();
    $('.tabMenu li').removeClass('active');
    $(this).addClass('active');
  });
});

1ページに複数設置する場合

たまに1ページに複数設置したい場合があるが、上記の記述ではすべてのタブ切り替えが反応してしまうので、別のコードで対応する必要がある。

【jQuery】

$(function () {
  $('.tabContent').hide();
  $('.tabContent.active').show();
  $('.tabMenu li').click(function () {
    var num = $(this).parent().children('li').index(this);
    $(this).parent('.tabMenu').each(function () {
      $('li', this).removeClass('active').eq(num).addClass('active');
    });
    $(this).parents().next().find('.tabContent').removeClass('active').hide().eq(num).addClass('active').show();
  });
});
2018.06.15

WordPressでカテゴリ情報を表示する方法

WordPressでは、カテゴリ情報を取得・表示するには以下の方法がある。
記事の属するカテゴリの他に、親カテゴリや祖先カテゴリを取得したい場合があるが取得方法が違う。

現在のカテゴリ取得

<?php
$cats = get_the_category(); //現在のカテゴリーを取得
$cat = $cats[0];
$cat_id   = $cat->cat_ID; //カテゴリーIDを表示
$cat_name = $cat->cat_name; //カテゴリー名を表示
$cat_slug = $cat->category_nicename; //スラッグを表示
?>

親カテゴリ取得

<?php 
$cats = get_the_category(); //現在のカテゴリーを取得
$cat = $cats[0];

if( $cat->parent ){ //親カテゴリの場合
  $parent = get_category( $cat->parent );
  echo $parent->cat_ID; //カテゴリーIDを表示
  echo $parent->cat_name; //カテゴリー名を表示
  echo $parent->slug; //スラッグを表示
} else {
  echo $cat->cat_ID; //カテゴリーIDを表示
  echo $cat->cat_name; //カテゴリー名を表示
  echo $cat->slug; //スラッグを表示
}
?>

祖先カテゴリ取得(投稿記事で表示させる)

<?php
$cats = get_the_category($post->ID); //現在の投稿記事のIDからカテゴリー情報を取得
$cat = $cats[0]; //複数登録されている場合、一番最初のカテゴリー情報を取得
$catName = $cat->cat_name; //現在表示のカテゴリー名
$catSlug = $cat->slug; //現在表示のスラッグ
$catParent = $cat->parent; //親カテゴリーのID。なければ0。
$thisCat = $cat->cat_ID; //現在表示のカテゴリーID

if( $catParent == 0){ //一番上の親カテゴリーなら
  echo $thisCat; //カテゴリーID表示
  echo $catName; //カテゴリー名表示
  echo $catSlug; //スラッグ表示
} else {
  $ancestor = array_pop(get_ancestors( $thisCat, 'category' )); //配列の一番最後の値(一番上のカテゴリーID)を取得
  echo $ancestor; //カテゴリーID表示
  echo get_cat_name($ancestor) -> cat_name; //カテゴリー名表示
  echo get_category($ancestor) -> slug; //スラッグ表示
}
?>

祖先カテゴリ取得(カテゴリーアーカイブで表示させる)

<?php
$cat = get_queried_object(); //カテゴリーオブジェクトを取得
$catName = $cat->cat_name; //現在表示のカテゴリー名
$catSlug = $cat->slug; //現在表示のスラッグ
$catParent = $cat->parent; //親カテゴリーのID。なければ0。
$thisCat =  $cat->cat_ID; //現在表示のカテゴリーID
 
if( !$catParent ){ //現在のページが一番上の親カテゴリーなら(0なら)
  echo $thisCat; //カテゴリーID表示
  echo $catName; //カテゴリー名表示
  echo $catSlug; //スラッグ表示
} else {
  $ancestor = array_pop(get_ancestors( $thisCat, 'category' )); //配列の一番最後の値(一番上のカテゴリーID)を取得
  echo $ancestor; //カテゴリーID表示
  echo get_cat_name($ancestor) -> cat_name; //カテゴリー名表示
  echo get_category($ancestor) -> slug; //スラッグ表示
}
?>
2018.05.29

JavaScriptで日時を表示する

まずは、現在の日時をDateオブジェクトにより取得

now = new Date(); 

さらに、取得した日時より必要な日時を取り出す

// 年を取得
y = now.getFullYear();
 
// 月を取得(月の取得は0~11の値が取得されるので、1をプラスする)
m = now.getMonth() + 1;
 
// 日を取得
d = now.getDate();

// 曜日を取得
w = [ '日', '月', '火', '水', '木', '金', '土' ][ now.getDate() ];
 
// 時を取得
h = now.getHours();
 
// 分を取得
i = now.getMinutes();
 
// 秒を取得
s = now.getSeconds();

これを利用することで、日付の比較や特定期間の実行などが可能になる。
その他、表示のカスタマイズは以下の通り

//現在時刻をリアルタイムで表示
$(function(){
  setInterval(function(){
    $('#demo1').text(new Date());
  }, 1000);
});

// 1桁を2桁に変換する
m = ('0' + m).slice(-2);
d = ('0' + d).slice(-2);
2018.05.12

JSで画像をロールオーバー(マウスオーバー)させる

CSSのみで画像をロールオーバー(マウスオーバー)させるのはホームページ制作に関わっている人であれば大抵使用しますが、
切り替える画像が多い場合やCSSでコードを書くのが面倒な場合は、JSにてロールオーバーさせるのが効率がいい。

function smartRollover() {
  if (document.getElementsByTagName) {
    var images = document.getElementsByTagName("img");

    for (var i = 0; i < images.length; i++) {
      if (images[i].getAttribute("src").match("_off.")) {
        images[i].onmouseover = function () {
          this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
        }
        images[i].onmouseout = function () {
          this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
        }
      }
    }
  }
}

if (window.addEventListener) {
  window.addEventListener("load", smartRollover, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", smartRollover);
}

使用するには、ロールオーバー前の画像ファイル名を「**_off.jpg」とし、ロールオーバー後の画像ファイル名を「**_on.jpg」とする。
もちろん、画像形式はpngでもgifでもOK

MAIL制作・お見積りのご依頼
ご相談・お問い合わせ