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

サイト運営

2020.02.152021.11.15

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

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

この記事で分かること

SANGO公式のカスタマイズのココが面倒
1. TOPページのTOPに人気記事を表示するカスタマイズ
2. サイドバーにプロフィールを表示するカスタマイズ
SANGOカスタマイズ：TOPページに人気記事を表示する
1. ウィジェットに設置するショートコード
2. CSS
SANGOカスタマイズ：サイドバーにプロフィールを表示
まとめ

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

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

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

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

https://saruwakakun.com/sango/like_saruwaka

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

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

記事下にプロフィール（この記事を書いた人）を設置する

SANGOでは記事下に「この記事を書いた人」というプロフィールを簡単に表示させることができます。目次非表示「この記事を書いた人」を表示させる方法手順1：名前を設定手順2：肩書きを入力手順3：ソーシャルメディア ...

プロフィールの本文や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;