Categories
PHP+MySQL WordPress ホームページ制作・作成

WordPress で「この記事を書いた人」を作成

管理画面のプロフィールの情報を用いて「この記事を書いた人」を作成。

コーポレートサイトの場合、社長やスタッフのブログに利用できるのではないかと・・・。

まずは functions.php で次を入力し、管理画面のプロフィールページに項目を増やす。

function userSnMeta($sns)
{
	$sns['twitter']   = 'Twitter(twitter.com/以降)';
	$sns['facebook']  = 'Facebook(facebook.com/以降)';
	$sns['instagram'] = 'Instagram(instagram.com/以降)';
	return $sns;
}
add_filter('user_contactmethods', 'userSnMeta', 10, 1);

テンプレートで呼び出す場合は以下。

// プロフィール情報の入力有無で判定
if(!empty(get_the_author_meta('user_description')))
{
	the_author(); // ブログ上の表示名
	echo( get_avatar( get_the_author_meta( 'ID' ), 80 ) );	// アバター
	the_author_meta('user_url');	// webサイト
	the_author_meta('twitter');		// Twitter (functions.phpで追加した項目)
	the_author_meta('facebook');	// Facebook (functions.phpで追加した項目)
	the_author_meta('instagram');	// Instagram (functions.phpで追加した項目)
	the_author_meta('user_description');	// ユーザー情報
}
Categories
javascript(jQuery) ホームページ制作・作成

input[type=”range”] と jQuery

input[type=”range”] という出番が少ないタグですが、使う機会があったので、色々と忘れないように。

ローンのシミュレーションや自動見積もりなどで使うことがあるかと。

まずは HTML。

<ul>
	<li><input type="number" id="sampleView" name="sampleView" min="0" max="2000" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>

jQuery は次のように。

$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( $(this).val() );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});
});

カンマ区切りにしたい場合、input[type=”number”] ではカンマ区切りができないので、input[type=”text”] として、次を使う。

<ul>
	<li><input type="text" id="sampleView" name="sampleView" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>
$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( addComma( $(this).val() ) );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});

	function addComma(num)
	{
		return String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1,');
	}
});
Categories
HTML+CSS javascript(jQuery) ホームページ制作・作成

ヘッダー固定でページ内リンク

検索すれば多数ヒットするのですが、自分がわすれないために。

ヘッダーなどをページ上部に固定させた場合、ページ内リンクを設けるとヘッダーの下に隠れてしまう現象。

アンカーがページの上部に移動し、その上に position:fixed; と z-index を指定したことが原因。

なので、ヘッダーの高さの分だけアンカーをずらせばよい。
方法は CSS と jQuery の2通り。

#anchorText{
margin-top:-100px; /* ヘッダーの高さ */
padding-top:100px; /* ヘッダーの高さ */
}

jQuery では、target.offset().top にヘッダーの高さ分を引けばよい。

position = target.offset().top - 100;
Categories
ホームページ制作・作成

ホームページをリニューアル

オフィスのホームページ

1年以上放置していた事務所のホームページをリニューアルしました。

ファーストビューに動画を設置するなど重そうと思いならがも試験的に運営していきたいと考えています。

Categories
WordPress プラグイン ホームページ制作・作成 写真

360度写真を WordPress に

RICOH THETA を購入し早半年。
仕事で使っているのはもちろんのこと、プライベートで撮影した写真も LINE や Facebook にアップして楽しんでおります。

さて、そんな折、WordPress の記事にアップしたことがないことに気が付きました。

但し、そのままアップしてもマウスでぐりぐりといくらやっても動いてくれません。なので、プラグインを探したところ・・・・・あるではないですか! 次のプラグインを早速インストール&有効化。

WP-VR-view – Add Photo Sphere, 360 video to WordPress

でアップした写真は以下。

多摩センター駅前です。2017年11月の撮影。