【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ
最終更新日:2020.12.17

LION MEDIA(ライオンメディア)テーマはデフォルトだと記事詳細内の下部分のみプロフィールが表示されます。

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

サイドバーにプロフィールを表示する方法はいろいろあるのですが折角LION MEDIA(ライオンメディア)テンプレートの方で雛形が用意されているので、管理画面で入力したプロフィール内容をLIONMEDIAのレイアウトそのままで表示する方法を紹介します。

3OWEBが3人体制なので、複数人も対応しています!

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

このブログはカスタマイズもされていてわかりにいのでプレーンな状態のDEMOも作成しました。
DEMOサイト

一番下にプレーンな状態に対応を加えたソースファイルも配布しています。

まずはプロフィールの設定

【ユーザー】→【あなたのプロフィール】を開く

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

プロフィールを書く

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ
SNS欄も入力があればアイコンが表示されます
【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

STEP1 function.phpの編集

子テーマのfunctions.phpを編集します。
子テーマはメインテンプレートがアップデートされた時、折角書いたコードが消えるリスクを防いだりテンプレートベースを触るリスクを抑えたりしてくれます!ありがや

【外観】→【テーマ】で「LION MEDIA Child」を有効にしてください。

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ
■FTPで開いて追加する
「/wp-content/themes/lionmedia-child」内functions.php

■【外観】→【テーマの編集】で追加する
functions.php

なこ
FTPソフトはWindowsならFFFTP、Macならfilezillaがおすすめです!設定などはレンタルサーバーの設定でちぇっくです

functions.phpファイルの以下部分を【変更後】にさしかえてください。

変更前


//////////////////////////////////////////////////
//親テーマのCSSを読み込む
//////////////////////////////////////////////////
function fit_head_child() {
	if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-main')) {
		echo '<link class="css-async" rel href="'.get_template_directory_uri().'/style.css">'."\n";
	}else{
		echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/style.css">'."\n";
	}
	if (is_singular()){
		if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-content')) {
			echo '<link class="css-async" rel href="'.get_template_directory_uri().'/css/content.css">'."\n";
		}else{
			echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/content.css">'."\n";
		}
	}
}
add_action('wp_head', 'fit_head_child');

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

変更後

コピー


//////////////////////////////////////////////////
//親テーマのCSSを読み込む
//////////////////////////////////////////////////
function fit_head_child() {
	if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-main')) {
		echo '<link class="css-async" rel href="'.get_template_directory_uri().'/style.css">'."\n";
		echo '<link class="css-async" rel href="'.get_template_directory_uri().'/css/content.css">'."\n";
	}else{
		echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/style.css">'."\n";
		echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/content.css">'."\n";
	}
	if (is_singular()){
		if ( get_option('fit_seo_cssLoad') == "value2" && get_option('fit_seo_cssLoad-content')) {
			echo '<link class="css-async" rel href="'.get_template_directory_uri().'/css/content.css">'."\n";
		}else{
			echo '<link rel="stylesheet" href="'.get_template_directory_uri().'/css/content.css">'."\n";
		}
	}
}
add_action('wp_head', 'fit_head_child');

プロフィール用のCSSが記事詳細以外読み込まれていないので全部のページで効くようにCSSを読み込みます。

STEP2 sidebar.phpの編集

プロフィール用のコードを子テーマのサイドバーに追加していきます。
子テーマはメインテンプレートがアップデートされた時、折角書いたコードが消えるリスクを防いだりテンプレートベースを触るリスクを抑えたりしてくれます!ありがや

【外観】→【テーマ】で「LION MEDIA Child」を有効にしてください。

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ
■FTPで開いて追加する

FTPファイルソフトでサーバーにアップロードしているWordPressのフォルダを開きます。

アップロードしたフォルダ内にある【/wp-content/themes/lionmedia】内【lionmedia】ディレクトリからsidebar.phpを【lionmedia-child】ディレクトリにコピーします。

なこ
FTPソフトはWindowsならFFFTP、Macならfilezillaがおすすめです!設定などはレンタルサーバーの設定でチェックです

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ

【lionmedia-child】ディレクトリにコピーしたsidebar.php内に以下を追加します。

場所はどこでもOKですが、
<div class="l-sidebar">
のすぐ下がいいかなぁと思います。

ユーザー数が複数の場合は登録順に全員表示されます。

コピー


   <!-- プロフィール -->
  <div class="sidebar__profile">
  <?php $users = get_users( array('orderby'=>ID,'order'=>ASC) );
  foreach($users as $user) {
    $user_id = $user->ID; ?>
    <aside class="profile">
      <div class="profile__imgArea">
        <?php
        $author = get_the_author_meta('ID');
        $author_img = get_avatar($author);
 	      $imgtag= '/<img.*?src=(["\'])(.+?)\1.*?>/i';
 	      if(preg_match($imgtag, $author_img, $imgurl)){
 	    	  $author_img = $imgurl[2];
 	      }
        ?>
        <?php if($myAmp){echo '<amp-img layout="responsive"';}else{echo '<img';} ?> src="<?php echo $author_img; ?>" alt="<?php echo the_author_meta('display_name',$user_id); ?>" width="60" height="60" >
          <?php if($myAmp){echo '</amp-img>';}?>

          <ul class="profile__list">
            <?php
            if (get_the_author_meta('facebook',$user_id))  {
              echo '<li class="profile__item"><a class="profile__link icon-facebook" href="'. esc_url(get_the_author_meta('facebook',$user_id)) .'"></a></li>';
            }if (get_the_author_meta('twitter',$user_id))  {
              echo '<li class="profile__item"><a class="profile__link icon-twitter" href="'. esc_url(get_the_author_meta('twitter',$user_id)) .'"></a></li>';
            }if (get_the_author_meta('instagram',$user_id))  {
              echo '<li class="profile__item"><a class="profile__link icon-instagram" href="'. esc_url(get_the_author_meta('instagram',$user_id)) .'"></a></li>';
            }if (get_the_author_meta('gplus',$user_id))  {
              echo '<li class="profile__item"><a class="profile__link icon-google" href="'. esc_url(get_the_author_meta('gplus',$user_id)) .'"></a></li>';
            }
            ?>
          </ul>
        </div>
        <div class="profile__contents">
          <h2 class="profile__name"><?php the_author_meta('display_name',$user_id); ?>
            <span class="btn"><a class="btn__link btn__link-profile" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID',$user_id ) ); ?>">投稿一覧</a></span>
          </h2>
          <?php if (get_the_author_meta('user_group',$user_id))  { echo'<h3 class="profile__group">'; echo esc_html(get_the_author_meta('user_group',$user_id)); echo'</h3>'; } ?>
          <div class="profile__description"><?php the_author_meta('description',$user_id); ?></div>
        </div>
      </aside>
    <?php } ?>
  </div>
    <!-- /プロフィール -->

完成!!

ダウンロード

変更したファイル一式をダウンロードできます。

DEMOサイト

FTPファイルソフトでサーバーにアップロードしているWordPressのフォルダを開きます。
【/wp-content/themes/lionmedia-child】ディレクトリにコピーします。

lionmedia-childファイル一式どダウンロード

まとめ

プロフィールがばっちり表示されましたでしょうか?
LION MEDIA(ライオンメディア)テンプレートについては他にも記事を書いています。
カスタマイズについてはもりもり追加していく予定です。


LION MEDIA(ライオンメディア)

ダウンロードはこちらデモ

【WordPress】LION MEDIA(ライオンメディア)テーマのサイドバーにプロフィールを表示するカスタマイズ 制作 FIT -フィット-
http://fit-jp.com
各分野の専門家が集うフリーランスチームさんです。

WordPressバージョン4.4以上推薦
テーマバージョン2.0.0 (2018.02.15 更新)
テーマバージョン1.2.1 (2018.01.18 更新)
テーマバージョン1.0.0 (2017.10.27 リリース)