【WordPress】プロフィールウィジェットの作り方【テーマ開発】

2020/12/22 2023/04/08

今回は、WordPressで「プロフィールウィジェット」の作り方について解説していきます。

【WordPress】プロフィールウィジェットを設置する方法①

1.WordPressの管理画面にログインして、「外観→ウィジェット」に移動する

2.「プロフィールウィジェット」をクリックして、表示したいウィジェットエリアを選択する

続きは②へ👍

— マルユメ@WordPressテーマ開発してブログ運営 (@maruyumeblog) January 17, 2023

サイドバーにプロフィールを表示したいけど、やり方がわからない・・・

使っているテーマにプロフィールウィジェットが実装されていない

プロフィールウィジェットを自作したい

という方は、本記事が参考になるはずです。

また、WordPressテーマ「SIMPLE」では、プロフィールウィジェットを実装済みなので、すぐに使いたい方はダウンロードしてみてください。

※下記のようなプロフィールをWordPress管理画面から作成できます。

WordPressテーマ「SIMPLE」-ダウンロードページ-

Contents

【WordPress】プロフィールウィジェットの作り方【テーマ開発】

【WordPress】プロフィールウィジェットの作り方【テーマ開発】

具体的な手順は、以下の通り。

プロフィールウィジェットを作る
作ったウィジェットを登録する
作ったphpファイルをfunctions.phpに読み込ませる
WordPress管理画面でプロフィールウィジェットを設置する
プロフィールウィジェットの設定をする

順番に解説していきます。

プロフィールウィジェットを作る

まずは、プロフィールウィジェットを作っていきます。

名前はなんでも良いですが、空のphpファイルを作成して、そこにコードを書いていきます。

今回は、「custom-widget.php」という名前にします。

プロフィールウィジェットの全コードは、下記のとおり。

<?php

//カスタムウィジェットの作成~プロフィールウィジェット~
class Profile_Widget extends WP_Widget {
	//WordPress でウィジェットを登録
	function __construct() {
		parent::__construct(
			'Profile_widget', // Base ID
			__( 'プロフィールウィジェット', 'text_domain' ), // Name
			array( 'description' => __( 'このウィジェットを追加するだけで簡単にプロフィールを作成し、任意の場所に設置できます。', 'text_domain' ), ) // Args
		);
	}
	//ウィジェットのフロントエンド表示
	public function widget( $args, $instance ) {
		$name = apply_filters( 'widget_body', empty( $instance['name'] ) ? '' : $instance['name'], $instance, $this->id_base );
		$desc = apply_filters( 'widget_text', empty( $instance['desc'] ) ? '' : $instance['desc'], $instance, $this->id_base );
		$profile_img_url = apply_filters( 'widget_body', empty( $instance['profile_img_url'] ) ? '' : $instance['profile_img_url'], $instance, $this->id_base );
		$profile_img_url_check = apply_filters( 'widget_body', empty( $instance['profile_img_url_check'] ) ? '' : $instance['profile_img_url_check'], $instance, $this->id_base );
		$bottom_link_icon1 = apply_filters( 'widget_text', empty( $instance['bottom_link_icon1'] ) ? '' : $instance['bottom_link_icon1'], $instance, $this->id_base );
		$bottom_link_icon2 = apply_filters( 'widget_text', empty( $instance['bottom_link_icon2'] ) ? '' : $instance['bottom_link_icon2'], $instance, $this->id_base );
		$bottom_link_icon3 = apply_filters( 'widget_text', empty( $instance['bottom_link_icon3'] ) ? '' : $instance['bottom_link_icon3'], $instance, $this->id_base );
		$bottom_link_icon4 = apply_filters( 'widget_text', empty( $instance['bottom_link_icon4'] ) ? '' : $instance['bottom_link_icon4'], $instance, $this->id_base );
		$bottom_link_url1 = apply_filters( 'widget_text', empty( $instance['bottom_link_url1'] ) ? '' : $instance['bottom_link_url1'], $instance, $this->id_base );
		$bottom_link_url2 = apply_filters( 'widget_text', empty( $instance['bottom_link_url2'] ) ? '' : $instance['bottom_link_url2'], $instance, $this->id_base );
		$bottom_link_url3 = apply_filters( 'widget_text', empty( $instance['bottom_link_url3'] ) ? '' : $instance['bottom_link_url3'], $instance, $this->id_base );
		$bottom_link_url4 = apply_filters( 'widget_text', empty( $instance['bottom_link_url4'] ) ? '' : $instance['bottom_link_url4'], $instance, $this->id_base );
		echo $args['before_widget'];
		?>
		<div class="my-profile">
			<div class="my-profile-thumb">
				<img src="<?php echo $profile_img_url; ?>" />
			</div>
			<div class="myname">
				<?php echo $name; ?>
			</div>
			<div class="myintro">
				<?php echo $desc; ?>
			</div>
			<div class="my-link">
				<div class="my-profile-link">
					<a href="<?php echo $bottom_link_url1; ?>"><i class="<?php echo $bottom_link_icon1; ?>"></i></a>
				</div>
				<div class="my-contact-link">
					<a href="<?php echo $bottom_link_url2; ?>"><i class="<?php echo $bottom_link_icon2; ?>"></i></a>
				</div>
				<div class="my-sitemap-link">
					<a href="<?php echo $bottom_link_url3; ?>"><i class="<?php echo $bottom_link_icon3; ?>"></i></a>
				</div>
				<div class="my-twitter-link">
					<a href="<?php echo $bottom_link_url4; ?>"><i class="<?php echo $bottom_link_icon4; ?>"></i></a>
				</div>
			</div>
		</div>
		<?php
		echo $args['after_widget'];
	}
	//バックエンドのウィジェットフォーム
	public function form( $instance ) {
		$name  = isset( $instance['name'] ) ? $instance['name'] : '';
		$desc = isset( $instance['desc'] ) ? $instance['desc'] : '';
		$profile_img_url = isset( $instance['profile_img_url'] ) ? $instance['profile_img_url'] : '';
		$profile_img_url_check = isset( $instance['profile_img_url_check'] ) ? $instance['profile_img_url_check'] : '';
		$bottom_link_icon1 = isset( $instance['bottom_link_icon1'] ) ? $instance['bottom_link_icon1'] : '';
		$bottom_link_icon2 = isset( $instance['bottom_link_icon2'] ) ? $instance['bottom_link_icon2'] : '';
		$bottom_link_icon3 = isset( $instance['bottom_link_icon3'] ) ? $instance['bottom_link_icon3'] : '';
		$bottom_link_icon4 = isset( $instance['bottom_link_icon4'] ) ? $instance['bottom_link_icon4'] : '';
		$bottom_link_url1 = isset( $instance['bottom_link_url1'] ) ? $instance['bottom_link_url1'] : '';
		$bottom_link_url2 = isset( $instance['bottom_link_url2'] ) ? $instance['bottom_link_url2'] : '';
		$bottom_link_url3 = isset( $instance['bottom_link_url3'] ) ? $instance['bottom_link_url3'] : '';
		$bottom_link_url4 = isset( $instance['bottom_link_url4'] ) ? $instance['bottom_link_url4'] : '';
		wp_enqueue_media();
		wp_enqueue_script(
			'my-media-uploader', get_bloginfo( 'template_directory' ) . '/js/custom-media-uploader.js', array('jquery'), false, false
		);
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e( 'プロフィール名' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" type="text" value="<?php echo esc_attr( $name ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'desc' ); ?>"><?php _e( '説明' ); ?></label>
			<textarea rows="6" cols="10" class="widefat" id="<?php echo $this->get_field_id( 'desc' ); ?>" name="<?php echo $this->get_field_name( 'desc' ); ?>" type="text"><?php echo esc_attr( $desc ); ?></textarea>
		</p>
		<p>
			<input class="profile-img" id="<?php echo $this->get_field_id('profile_img_url'); ?>" name="<?php echo $this->get_field_name('profile_img_url'); ?>" type="hidden" value="<?php echo esc_attr($profile_img_url); ?>" />
			<div id="media"><?php echo '<img src="'.$profile_img_url.'" />' ?></div>
		</p>
		<p>
			<input type="button" widgetid="<?php echo $this->id ?>" name="media" value="プロフィール画像を選択" />
			<input type="button" widgetid="<?php echo $this->id ?>" name="media-clear" value="画像をクリア" />
		</p>
		<p>
			<input class="profile-img-check" id="<?php echo $this->get_field_id('profile_img_url_check'); ?>" name="<?php echo $this->get_field_name('profile_img_url_check'); ?>" type="checkbox" checked value="ok" />この画像で確定
		</p>
		<p><label><?php _e( '下部リンクのアイコン（fontawesomeから表示したいアイコンのコードをコピーして以下に貼り付けてください。fas fa-homeのように、class内の文字列のみを貼り付けてください。）' ); ?></label></p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_icon1' ); ?>"><?php _e( 'アイコン1' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_icon1' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_icon1' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_icon1 ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_icon2' ); ?>"><?php _e( 'アイコン2' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_icon2' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_icon2' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_icon2 ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_icon3' ); ?>"><?php _e( 'アイコン3' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_icon3' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_icon3' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_icon3 ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_icon4' ); ?>"><?php _e( 'アイコン4' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_icon4' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_icon4' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_icon4 ); ?>" />
		</p>
		<p><label><?php _e( '下部リンクのURL（アイコンをクリックしたときのリンク先URLを記載してください。例 → https://simple-wp-theme.com/contact/）' ); ?></label></p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_url1' ); ?>"><?php _e( 'URL1' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_url1' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_url1' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_url1 ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_url2' ); ?>"><?php _e( 'URL2' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_url2' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_url2' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_url2 ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_url3' ); ?>"><?php _e( 'URL3' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_url3' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_url3' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_url3 ); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'bottom_link_url4' ); ?>"><?php _e( 'URL4' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'bottom_link_url4' ); ?>" name="<?php echo $this->get_field_name( 'bottom_link_url4' ); ?>" type="text" value="<?php echo esc_attr( $bottom_link_url4 ); ?>" />
		</p>

		<?php 
	}
	//ウィジェットフォームの値を保存用にサニタイズ
	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['name']  = sanitize_text_field( $new_instance['name'] );
		$instance['desc']  = sanitize_text_field( $new_instance['desc'] );
		$instance['profile_img_url']  = sanitize_text_field( $new_instance['profile_img_url'] );
		$instance['profile_img_url_check']  = sanitize_text_field( $new_instance['profile_img_url_check'] );
		$instance['bottom_link_icon1']  = sanitize_text_field( $new_instance['bottom_link_icon1'] );
		$instance['bottom_link_icon2']  = sanitize_text_field( $new_instance['bottom_link_icon2'] );
		$instance['bottom_link_icon3']  = sanitize_text_field( $new_instance['bottom_link_icon3'] );
		$instance['bottom_link_icon4']  = sanitize_text_field( $new_instance['bottom_link_icon4'] );
		$instance['bottom_link_url1']  = sanitize_text_field( $new_instance['bottom_link_url1'] );
		$instance['bottom_link_url2']  = sanitize_text_field( $new_instance['bottom_link_url2'] );
		$instance['bottom_link_url3']  = sanitize_text_field( $new_instance['bottom_link_url3'] );
		$instance['bottom_link_url4']  = sanitize_text_field( $new_instance['bottom_link_url4'] );
		return $instance;
	}
}

簡単に説明すると、コードは下記の3つに分かれます。

サイトに表示されるプロフィールのコード
WordPress管理画面のプロフィール設定のコード
サニタイズ(無害化)用のコード

サイトに表示されるプロフィールのコード

↓の関数で、サイトに表示されるプロフィールの設定をしています。

//ウィジェットのフロントエンド表示
public function widget( $args, $instance ) {
・・・
}

WordPress管理画面のプロフィール設定のコード

プロフィールウィジェットの設定は、WordPress管理画面の「外観→ウィジェット」から行います。

この「プロフィールウィジェットの設定」の内容を、↓の関数で指定しています。

//バックエンドのウィジェットフォーム
public function form( $instance ) {
・・・
}

サニタイズ(無害化)用のコード

最後に、↓の関数で無害化の処理を行っています。

//ウィジェットフォームの値を保存用にサニタイズ
public function update( $new_instance, $old_instance ) {
・・・
}

サニタイズについては、下記の記事で解説しています。

作ったウィジェットを登録する

次に、作ったウィジェットを登録するため、下記のコードをcustom-widget.phpに追加します。

//カスタムウィジェットの登録
function register_profile_widget() {
	register_widget( 'Profile_Widget' );
}
add_action( 'widgets_init', 'register_profile_widget' );

このコードを追加すると、WordPress管理画面の「外観→ウィジェット」のページに「プロフィールウィジェット」が追加されます。

作ったphpファイルをfunctions.phpに読み込ませる

これで、custom-widget.phpは完成です。

あとは、custom-widget.phpをテーマディレクトリ直下にアップロードして、そこにある「functions.php」に読み込ませれば、完了です。

↓のコードをfunctions.phpに追加して、custom-widget.phpを読み込ませます。

get_template_part( 'custom-widget' );

プロフィールウィジェットを設置する

これで、プロフィールウィジェットの作成ができました。あとはウィジェットを設置するだけです。

まずは、WordPressの管理画面にログインして、「外観 → ウィジェット」に移動します。

表示したいウィジェットエリアを選択してプロフィールウィジェットを設置します。

ウィジェットの設置方法とウィジェットエリアの一覧は、以下の記事をご覧ください。

【WordPress】Classic Widgets/Gutenbergでウィジェットを追加する方法を解説 WordPressにはウィジェットという機能があり、様々なコンテンツをサイト上に簡単に表示することができます。本記事では、WordPressで…

【WordPress】新しいウィジェットエリアを作成・追加する方法【コード解説】今回は、WordPressでウィジェットエリアを新たに作成して追加する方法について解説していきます。という方は、本記事が参考になるはずです。 …

プロフィールウィジェットの設定をする

設置したら、プロフィールウィジェットの各項目を設定していきます。

設定項目は以下の5つです。

プロフィール名
説明
プロフィール画像
下部リンクのアイコン
アイコンクリック時のリンク先URL

プロフィール名

プロフィール名（ハンドルネームなど）を入力します。

説明

ここでは、プロフィール名の下に表示したいテキスト（例えば自己紹介など）を入力できます。

プロフィール画像

プロフィール画像を設定できます。

「プロフィール画像を選択」を押すと画像選択画面が出てくるので、画像を選択してください。

そのあと、「この画像で確定」にチェックを入れて、「保存」をクリックします。

もしクリックしても選択画面が出てこない時は、一度画面をリロードしてみてください。

下部リンクのアイコン

テーマ「SIMPLE」のプロフィールウィジェットは、以下の画像のようにリンクつきアイコンを最大4つまで設定できます。

FontAwesomeから好きなアイコンを選んでコードを貼り付けると、上記の画像のように表示されます。

→ FontAwesome

FontAwesomeのコードを貼り付ける際は、class内のコードのみを貼り付けるようにしてください。
例えば、<i class=”fas fa-ad”></i>というコードなら、
fas fa-ad
この部分のみを貼り付けてください。

FontAwesomeからアイコンのコードを取得する方法については、以下の記事をご覧ください。

【WordPress】プロフィールウィジェットの作り方【テーマ開発】今回は、WordPressで「プロフィールウィジェット」の作り方について解説していきます。【WordPress】プロフィールウィジェットを設置…

アイコンクリック時のリンク先URL

アイコンをクリックした時のリンク先URLを設定できます。

ここには、リンク先として設定したいURLを貼りつけてください。

以上になります。本記事を参考にして、プロフィールウィジェットを実装してみてください。

テーマ開発

【WordPress】おすすめ記事をプラグインなしでサイドバーに表示する方法を解説【テーマ開発】

2020/12/22

【WordPress】プラグインの追加方法を解説します【簡単】

2020/12/22

SIMPLEとは

デモ

マニュアル

アップデート

ダウンロード

【WordPress】プロフィールウィジェットの作り方【テーマ開発】

SIMPLEとは

デモ

マニュアル

アップデート

ダウンロード

【WordPress】プロフィールウィジェットの作り方【テーマ開発】

【WordPress】プロフィールウィジェットの作り方【テーマ開発】

プロフィールウィジェットを作る

サイトに表示されるプロフィールのコード

WordPress管理画面のプロフィール設定のコード

サニタイズ(無害化)用のコード

作ったウィジェットを登録する

作ったphpファイルをfunctions.phpに読み込ませる

プロフィールウィジェットを設置する

プロフィールウィジェットの設定をする

プロフィール名

説明

プロフィール画像

下部リンクのアイコン

アイコンクリック時のリンク先URL

WordPressテーマ「SIMPLE」

RELATED POSTS

【WordPress】アイキャッチ付き最近の投稿ウィジェットの作り方【テーマ開発】

【WordPress】カエレバ/ヨメレバリンクのデザインをカスタマイズする方法【テーマ開発】

【WordPress】カレンダーウィジェットのデザインをカスタマイズする方法【テーマ開発】

【WordPress】アプリーチリンクのデザインをカスタマイズする方法【テーマ開発】

【WordPress】パンくずリストの作り方【テーマ開発】

【WordPress】おすすめ記事をプラグインなしでサイドバーに表示する方法を解説【テーマ開発】

PREV POST

【WordPress】おすすめ記事をプラグインなしでサイドバーに表示する方法を解説【テーマ開発】

NEXT POST

【WordPress】プラグインの追加方法を解説します【簡単】