kdcsライブラリー

カテゴリースラッグを取得して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ボタン終わり -->

※以前の記述では記事投稿時にアップロードした１番目の画像が取得されるため、
その画像を記事内で使用しなくても「最初の画像」と認識されてしまう。

こちらは記事内に張り付けてある最初の画像を取得する方法

function.phpに以下を記述

//投稿記事の最初の画像のサムネイル -------------------------------------------------------
function my_first_image_thumb(){
  global $post;
  $img_url = '';
  //デフォルト画像の設定
  $defaute_url = get_stylesheet_directory_uri(). '/images/default.png';

  //最初の画像を取得してIDを取得
  preg_match_all('/<img.+?class=".+?wp-image-(.+).*?".*?>/i', $post->post_content, $matches);
  if(isset($matches[1][0])){
    $img_id = ($matches[1][0]);
  }

  //最初の画像があれば分岐
  if(!empty($img_id)){
    //最初の画像IDからサムネイルのパスを取得してセット
    $img_url = my_wp_get_attachment_medium_url($img_id);
  } else {
    //最初の画像がない場合、デフォルト画像のパスをセット
    $img_url = $defaute_url;
  }
  return $img_url;
}

//画像IDからサムネイルサイズのパスを取得
function my_wp_get_attachment_medium_url( $id ) {
  $thumbnail_array = image_downsize( $id, 'thumbnail' );
  $thumbnail_path = $thumbnail_array[0];
  return $thumbnail_path;
}

テンプレート内に以下を記述
※リストタグで最新の記事を5件表示させる例

<ul class="sp_list">
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("posts_per_page=5&paged=$paged"); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li class="clearfix"><a href="<?php the_permalink() ?>"><span class="listImg"><img src="<?php echo my_first_image_thumb(); ?>"></span><span class="listTitle"><?php the_title(); ?></span></a></li>
<?php endwhile; else: //記事が無い場合 ?>
<li>＜＜ イベント準備中です ＞＞</li>
<?php endif; wp_reset_query(); //クエリのリセット ?>
</ul>

今までアップロード画像リサイズに使用していたResize at Upload Plusが
設定変更できないトラブル（原因不明）
Imsanityに変更

その他、「Resize Image After Upload」というプラグインもある