Wordpress

プロフィールをサイドバーに設置する

WordPressテーマCocoon用のものばかり出てくるので、プロフィールウィジェットが用意されていないテーマで表示させるには、どうすればいいか纏めてみた。

テキストウィジェットでPHPコードを動かす

PHP
function widget_text_exec_php( $widget_text ) {
    if( strpos( $widget_text, '<' . '?' ) !== false ) {
        ob_start();
        eval( '?>' . $widget_text );
        $widget_text = ob_get_contents();
        ob_end_clean();
    }
    return $widget_text;
}
add_filter( 'widget_text', 'widget_text_exec_php', 99 );
functions.php

上記をfunctions.phpに追加すると、テキストウィジェットでPHPコードが実行されるようになる。

簡単ですが、evalを使用していてセキュリティ的に宜しくないのでショートコードを使用しましょう。

プロフィール用のショートコードを作成

テキストウィジェットでショートコードは使えるので、ショートコードを使って書いていきましょう。
上記の、PHP直書きだと自動的にコメントアウトされてしまって動かなくなるので…
セキュリティ的にもアレですし

functions.phpに記述していきます。
なので、カスタムテーマを用意しておいた方がテーマバージョンアップ時に消えずに済みます。

ニックネーム

IDが1のユーザーのニックネームを表示。
ユーザープロフィールの「ブログ上の表示名」に入力した値が出力されます。

PHP
function sc_profile_name() {
    ob_start();
    $userId = 1;
    echo the_author_meta('display_name', $userId);
    return ob_get_clean();
}
add_shortcode('profile_name', 'sc_profile_name');
functions.php

プロフィール情報

IDが1のユーザーのプロフィール情報を表示。
ユーザープロフィールの「プロフィール情報」に入力した値が出力されます。

PHP
function sc_profile_description() {
    ob_start();
    $userId = 1;
    echo the_author_meta('description', $userId);
    return ob_get_clean();
}
add_shortcode('profile_description', 'sc_profile_description');
functions.php

アバター

IDが1のユーザーのアバター画像を表示。
ユーザープロフィールの「プロフィール写真」の画像が出力されます。

PHP
function sc_profile_avatar() {
    ob_start();
    $userId = 1;
    echo get_avatar($userId, 120);
    return ob_get_clean();
}
add_shortcode('profile_avatar', 'sc_profile_avatar');
functions.php

Twitter

IDが1のユーザーのTwitterアカウントを表示。
ユーザープロフィールの連絡先情報の「Twitter」に入力した値が出力されます。

PHP
function sc_profile_twitter() {
    ob_start();
    $userId = 1;
    echo the_author_meta('twitter', $userId);
    return ob_get_clean();
}
add_shortcode('profile_twitter', 'sc_profile_twitter');
functions.php

その他

このくらいあれば事足りるのではないかと思います。
その他プロフィール情報を取り出したい場合は関数リファレンス/get the author metaを参照してください。

サイドバーにプロフィールを作成する

サイドバーにテキストウィジェットを追加して、思うようにデザインしてください。

例えばこんな感じに書くと

HTML
<div style="text-align: center;"></div>
<div style="text-align: center;">MimosaHarvestasya
<a class="twitter-follow-button" href="https://twitter.com/MimosaHrvsty?ref_src=twsrc%5Etfw" data-size="large" data-show-screen-name="false" data-lang="ja" data-show-count="false">Follow @MimosaHrvsty</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
<p style="padding: 0 1em;">

COBOL系Javerさ。Blockchain Symbolのノードを運営していることもあり、主にバック側の事を色々調べたり作ったりしています。

https://symbol01.harvestasya.com:3001/node/info





FF14ではMimosa SamiとしてGaiaDC/Ifritで遊んでます。
FF14緑化運動家(目立った活動はしていない)。FF14トレジャーハンター(魔門開かない)。





did:symbol:NC3XK5WRNQSDZRDBRD6NWL3RHYV5QNLU4WTXODA





Amazon欲しいものリスト

</p>
HTML

こう表示されます。

ユーザーのプロフィール情報に書いたものが表示されます。

Twitterのフォローボタン

フォローボタンはTwitter Publishを使用しました。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

11 + fourteen =

ABOUT US
MimosaHarvestasya

COBOL系Javerさ。Blockchain Symbolのノードを運営していることもあり、主にバック側の事を色々調べたり作ったりしています。
https://symbol01.harvestasya.com:3001/node/info

FF14ではMimosa SamiとしてGaiaDC/Ifritで遊んでます。 FF14緑化運動家(目立った活動はしていない)。FF14トレジャーハンター(魔門開かない)。

did:symbol:NC3XK5WRNQSDZRDBRD6NWL3RHYV5QNLU4WTXODA

Amazon欲しいものリスト