お問い合わせはコチラから

SANGO プロフィール おススメ記事の進んだカスタマイズ

サイト運営

SANGOの初期状態から、TOPページのTOPに人気記事を表示するカスタマイズとサイドバーにプロフィールを表示するカスタマイズを行いました。

その時に、公式や他のサイトに書かれている内容だと、設置した後の設定が面倒すぎるだろうと思ったので、カスタマイズしました。

SANGO公式のカスタマイズのココが面倒

SANGOの良く見慣れたレイアウトや見た目というのは、初期状態だと表示できないということにまず驚きました。さらに、そのカスタマイズが結構泥臭くて2度びっくり。

TOPページのTOPに人気記事を表示するカスタマイズ

恐ろしいことに、記事のアイキャッチ画像やタイトル、リンク先などすべて自分で手入力する必要がある。

これは公式のカスタマイズとしてはちょっと手抜き過ぎでは?

サイドバーにプロフィールを表示するカスタマイズ

プロフィールの本文やSNSアイコンのリンク先など、Wordpressのユーザーページにある情報をわざわざHTMLで入力しなければならない。

SNSアイコンも常にすべて表示されるようになっていて、使用していないSNSアイコンは自分で削除しなければならない。

こちらも公式のカスタマイズとしてはちょっと手抜き過ぎでは?

SANGOカスタマイズ:TOPページに人気記事を表示する

TOPページ先頭ウィジェットエリアにカスタムHTMLを設置するケースのカスタマイズを更にカスタマイズします。

カスタムHTMLの内容をショートコード化して、自動的に記事を取得するように変更します。

今回作成したショートコードでは、指定のカテゴリの記事(slug:osusume)から2つを取得して、タイトル、画像、リンク先を自動的に設定して、人気記事として表示します。

表示数やカテゴリなどはショートコードを直接書き換えれば変更できます。

ウィジェットに設置するショートコード

<?php
add_shortcode('sng-recomend', 'recomend_shortcode');
if ( !function_exists( 'recomend_shortcode' ) ):
function recomend_shortcode( ){

	  $arg = array(
             'posts_per_page' => 2, // 表示する件数
             'orderby' => 'date', // 日付でソート
             'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
             'category_name' => 'osusume' // 表示したいカテゴリーのスラッグを指定
         );
$posts = get_posts( $arg );
if( $posts ): 
global $post;
ob_start();
	?>
<p class="center strong top-title"><i class="fa fa-line-chart"></i> 人気記事</p>
<div class="popular-posts cardtype">
<?php	foreach ( $posts as $post ) : 
	setup_postdata( $post ); ?>
  <article class="cardtype__article">
    <a class="cardtype__link" href="<?php echo the_permalink(); ?>">
      <div class="cardtype__img">
       <img src="<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $feat_image;?>" />
      </div>
      <div class="cardtype__article-info">
        <h2><?php echo $post->post_title; ?></h2>
      </div>
    </a>
  </article>
<?php endforeach; ?>
</div>
<?php
  endif;
  wp_reset_postdata();
?>
<p class="center strong top-title"><i class="fa fa-thumb-tack"></i> 新着記事</p>
<?php 
return ob_get_clean();
}
endif;

CSS

カードサイズを小さくしたい場合は、48%を小さくして調整してください。

/*トップページ人気記事用のウィジェット*/
.popular-posts .cardtype__article-info {
    padding-top: 0.5em;
}
.popular-posts .cardtype__link {
    padding-bottom: 10px;
}
.popular-posts.cardtype {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.popular-posts .cardtype__article {
    width: 48%;
    margin: 0 0 25px;
}
.popular-posts .cardtype__article:nth-child(odd){
    margin-right: 4%;
}
.popular-posts .cardtype__article p {
    margin: 0; 
}
.popular-posts.cardtype h2 {
    margin: 0 5px;
    font-size: 15px;
}

SANGOカスタマイズ:サイドバーにプロフィールを表示

カスタムHTMLで設定するプロフィールの設定項目をHTML編集を必要最低限にするカスタマイズです。

プロフィールの本文とSNSアイコンのリンク先をWordpressのユーザーページの設定値から自動的に取得します。

★が付いている部分は自分で設定する必要があります。

表示するuser_idは1になっていますので、必要に応じて変更してください。

<?php
add_shortcode('sng-profile', 'profile_shortcode');
if ( !function_exists( 'profile_shortcode' ) ):
function profile_shortcode( ){

$user_id = 1;
$all_meta_for_user = get_user_meta( $user_id );
$_twitter   = $all_meta_for_user['twitter'][0];
$_facebook  = $all_meta_for_user['facebook'][0];
$_instagram = $all_meta_for_user['instagram'][0];
$_feedly    = $all_meta_for_user['feedly'][0];
$_youtube   = $all_meta_for_user['youtube'][0];
$_line      = $all_meta_for_user['line'][0];
$_description= $all_meta_for_user['description'][0];

ob_start();
	?>
<div class="yourprofile">
 <div class="profile-background"><img src="★背景画像のURL★"></div>
 <div class="profile-img"><img src="★Profile画像のURL★" width="80" height="80"></div>
 <p class="yourname dfont">★名前★</p>
</div>
<div class="profile-content">
	<?php echo '<p>'.$_description.'</p>';	?>
</div>
<ul class="profile-sns dfont">
	<?php
if($_twitter){echo '<li><a href="'.$_twitter.'" target="_blank" rel="nofollow noopener" ><i class="fab fa-twitter"></i></a></li>';}
if($_facebook){echo '<li><a href="'.$_facebook.'" target="_blank" rel="nofollow noopener"><i class="fab fa-facebook"></i></a></li>';}
if($_instagram){echo '<li><a href="'.$_instagram.'" target="_blank" rel="nofollow noopener"><i class="fab fa-instagram" ></i></a></li>';}
if($_feedly){echo '<li><a href="'.$_feedly.'" target="_blank" rel="nofollow noopener"><i class="fa fa-rss"></i></a></li>';}
if($_youtube){echo '<li><a href="'.$_line.'" target="_blank"><i class="fab fa-line"></i></a></li>';}
if($_line){echo '<li><a href="'.$_youtube.'" target="_blank"><i class="fab fa-youtube"></i></a></li>';}
?>
	</ul>
<?php 
return ob_get_clean();
}
endif;

まとめ

今回ご紹介したカスタマイズであれば、プロフィールは既に設定してある項目を再度カスタムHTMLで指定する必要もなく、TOPのおススメ記事については、記事の変更や数の変更も楽になりますのでかなり捗るのではないかともいます。

タイトルとURLをコピーしました