kdcsライブラリー

WordPress カスタム投稿タイプの月別アーカイブ

アーカイブページ

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> 
  <?php wp_get_archives('post_type=カスタム投稿名&type=monthly&format=option&show_post_count=1'); ?>
</select>

カテゴリーページ（未検証）

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  <option value=""><?php echo attribute_escape(__('Select Month')); ?></option> 
  <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
</select>

カスタム投稿タイプの記事でカテゴリー（ターム）名を取得
さらに、ccsのクラスにスラッグ名を付けて色分けする

タクソノミー名は’information_category’

<?php
    if ($terms = get_the_terms($post->ID, 'information_category')) {
        foreach ( $terms as $term ) {
            $term_slug = $term -> slug;
            echo ('<span class="') ;
            echo esc_html($term_slug) ;
            echo ('">') ;
            echo esc_html($term->name)  ;
            echo ('</span>') ;
        }
    }
?>

出力はこちら

<span class="スラッグ名">ターム名</span>

カテゴリースラッグを取得してcssのクラスにする

新着記事を5件表示する

<?php query_posts("post_type=post&posts_per_page=5"); ?>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="ymd">（<?php the_time('Y年m月d日'); ?>）</span></li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>現在投稿記事はありません。</p>
<?php endif; wp_reset_query(); ?>

投稿カテゴリー名とスラッグを取得する

<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name; //カテゴリー名
$catslug = $cat[0]->slug; //スラッグ名
?>

でカテゴリー名を囲む

<span class="<?php echo $catslug; ?>"><?php echo $catname; ?></span>

全部まとめる

<?php query_posts("post_type=post&posts_per_page=5"); ?>
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
$catslug = $cat[0]->slug;
?>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()):  the_post(); ?>
<li><span class="<?php echo $catslug; ?>"><?php echo $catname; ?></span> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="ymd">（<?php the_time('Y年m月d日'); ?>）</span></li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>現在投稿記事はありません。</p>
<?php endif; wp_reset_query(); ?>

twitter facebook google+ hatena poket line

※コード内に「target=”_blank”」有り（rel=”noopener noreferrer”を付けて対応）

<ul id="sns_btn">
<li class="sns_btnInner"><a class="twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="noopener noreferrer" title="Twitterで共有">Twitter</a></li>
<li class="sns_btnInner"><a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&amp;t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" rel="noopener noreferrer" title="facebookで共有">facebook</a></li>
<li class="sns_btnInner"><a class="google_plus" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="noopener noreferrer" title="Google+で共有">Google+</a></li>
<li class="sns_btnInner"><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" rel="noopener noreferrer" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加">はてブ</a></li>
<li class="sns_btnInner"><a class="pocket" href="http://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="noopener noreferrer" title="pocketで共有">pocket</a></li>
<li class="sns_btnInner"><a class="line" href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer" title="LINEで送る">LINE</a></li>
</ul>

css

ul#sns_btn {
    width:100%;
    float: left;
    clear: both;
    padding: 0px;
    margin: 0px 0px 10px 0px;
}
ul#sns_btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
ul#sns_btn li.sns_btnInner {
    width:15%;
    float: left;
    padding: 0px;
    margin: 0px 2% 0px 0px;
    list-style-type: none;
}
ul#sns_btn li.sns_btnInner:nth-child(6n) {
    width:15%;
    margin: 0px 0px 0px 0px;
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner {
  width:32%;
  margin: 0px 2% 5px 0px;
  }
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner:nth-child(3n) {
  width:32%;
  margin: 0px 0px 5px 0px;
  }
ul#sns_btn li.sns_btnInner:nth-child(6n) {
  width:32%;
  margin: 0px 0px 5px 0px;
  }
}

ul#sns_btn li.sns_btnInner a {
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    color:#ffffff;
    display: block;
    padding: 8px 0px;
    margin: 0px;
    background-color:#f5f5f5;
    text-align:center;
    text-decoration: none;
    border-radius:5px;
}

@media (max-width: 659px) {
ul#sns_btn li.sns_btnInner a {
  font-size: 14px;
  padding: 10px 0px;
  }
}
/*ボタンカラー*/
ul#sns_btn li.sns_btnInner a.twitter {
    background-color: #00acee;
}
ul#sns_btn li.sns_btnInner a.facebook {
    background-color: #3b5998;
}
ul#sns_btn li.sns_btnInner a.google_plus {
    background-color: #dd4b39;
}
ul#sns_btn li.sns_btnInner a.hatena {
    background-color: #2D4C86;
}
ul#sns_btn li.sns_btnInner a.pocket {
    background-color: #EE4056;
}
ul#sns_btn li.sns_btnInner a.line {
    background-color: #5ae628;
}

target=”_blank”を使わず、javascriptでウインドウを開くコード

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
<ul>
<!--Facebookボタン-->
<li class="facebook">
<a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-facebook"></i><span> facebook</span>
<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?>
</a>
</li>
<!--ツイートボタン-->
<li class="tweet">
<a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
<i class="fa fa-twitter"></i><span> tweet</span>
<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?>
</a>
</li>
<!--Google+ボタン-->
<li class="googleplus">
<a href="//plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
<i class="fa fa-google-plus"></i><span> Google+</span>
<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?>
</a>
</li>
<!--はてなボタン-->
<li class="hatena">
<a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてブ</span>
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
</ul>
</div>

WordPressに「LINEで送る」ボタンを設置する方法
公式サイトからコードを取得する
※公式のコードを使うとPCでは小さい別ウインドウが表示される

アイコンを選ぶ
下記コードの「data-type=”share-a”」の部分、末尾のアルファベットで変わる

コード

<div class="line-it-button" style="display: none;" data-lang="ja" data-type="share-a" data-url="<?php the_permalink(); ?>"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>

動的WebサイトでLINEで送るボタンを呼び出す

<script type="text/javascript">LineIt.loadButton();</script>

以下は旧タイプ
※pcでは小さなウインドウは開かず別ページに移動する

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る">
</a>

モバイルのみ表示させる場合「is_mobile」で切り換え

<!-- LINEボタンここから-->
<!--スマホで見た時の表示 -->
<?php if(is_mobile()) { ?>
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank"><img src="ボタン画像のURL" width="ボタン幅" height="ボタン高さ" alt="LINEで送る" /></a>
<!--スマホで見た時の表示終わり -->
<!-- PCで見た時の表示 -->
<?php } else { ?>
<!-- 何も表示しない -->
<?php } ?>
<!-- PCで見た時の表示終わり -->
<!-- LINEボタン終わり -->