HOME  /WordPress(応用)
 /独自のメール送信プログラムを作成する
2024年07月01日

独自のメール送信プログラムを作成する


旧サイトでは総てが始めて試みだったので、メール機能に「Contact Form 7」プラグインを利用していました。

しかしWordPressの色々な事が判ってくると、メール送信は下記のWordPress関数で送れる事が判りました。

wp_mail($to,$subject,$message,$headers)

そこで「Contact Form 7」をカスタマイズして使うより、独自のフォームで作成した方が良いとの判断から独自のメール送信プログラムを作成しました。

但し、WordPressサーバにSMTPサーバが無い場合はSMTPのプラグインがが必要になります。

詳細は[WordPressから[WP SMTP]プラグインを利用してメールを送る方法]を参照してください。

1.メール送信プログラムの基本構造

1-1.メールプログラムの構成

メール送信プログラムは下記の5つのプログラムから構成されています。

プログラム 概要
1 main.php 固定ページから呼ばれるテンプレートで下記プログラムをCALLします
2 input.php データを入力する画面
3 check.php 入力データの不具合をチェックするプログラム
4 confirm.php 最終確認画面
5 sedmail.php メールを送信するプログラム

※1.上記プログラムは子テーマの中に「contact」フォルダを新規作成しこの中に作成しています。

1-2.固定ページの作成

新規に「お問い合わせ」ページを作成し、利用するテンプレートで上記の「main.php」のテンプレート名を指定しています。

1-3.各プログラム間でのデータの受け渡しについて

データの受け渡しはWordPressのセッション機能で受け渡します。

よってセッション機能をまだONにしてない場合は下記のファンクションを定義してください。

//$_SESSIONを使える様にする
function init_sessions(){
    if(!session_id()) {session_start();}
}
add_action('init', 'init_sessions');

※1.セッション機能の詳細については画面サイズを取得する方法を参照してください。

2.具体的なプログラムと解説

下記のタブの中で各プログラムの機能を解説しています。

  • main.php
  • input.php
  • check.php
  • confirm.php
  • sedmail.php

main.phpのプログラムは下記になります。

<?php
/*******************************
 固定ページ お問い合わせ
 Template Name:contact
*******************************/
?>
<?php get_header(); ?>
<?php
// 不正アクセスフラグ
$noindexaccess = true;
/*-------------------------*/
/* 全体のコントロール      */
/*-------------------------*/
switch($_POST["action"]):
	// メール送信処理と完了画面を表示
    case "sendmail":
		include('sendmail.php');
	break;
	// エラーチェック&確認画面表示
	case "confirm":
		include('check.php');
		if($error_flg !== 0):
			include('input.php');
		else:
			include('confirm.php');
		endif;
    break;
	// 新規入力画面を表示
	default:
		include('input.php');
endswitch;
?>
<?php get_footer();?>		

※1.不正アクセスフラグは各プログラムがこのメインルーチン以外から実行された場合に処理中断させるフラグです。

※2.$_POST[“action”]にセットされている名前で次に実行するプログラムを指定しています。

※3.始めは上記に何もセットされてないのでdefaultinput.phpが実行されます。

 メモ

各プログラムは「contact」フォルダの中にあります。

そこで固定ページのURLを実行すると「contact」フォルダの中のmain.phpが実行されます。

このプログラムの中でinclude(‘input.php’);が実行させると「contact」フォルダの中のinput.phpが実行させます。

すなわちincludeは実行フォルダ名が同一に場合は、実行プログラム名の指定だけで良い事になります。

input.phpのプログラムは下記になります。

<?php
/*******************************
  お問い合わせフォーム 入力画面
*******************************/
// 不正アクセスチェック
if(!$noindexaccess){header("HTTP/1.0 404 Not Found");exit();}
?>

<div id='background'>
	<div id='page-contener'>
		<div id='page-contener-data'> 
			<div id='title'>*** お問い合わせ入力画面 ***</div>
			<br/>
			<form method="post" action="" enctype="multipart/form-data" id='form'>
				<div id='label'>
        	<div id='label-a'>お名前</div><div id='label-b'> ※必須項目</div>
    			<div id='label-c'> <?php if($error_flg == 1){echo $error_mes;}?></div>
    		</div>
        <div id='name'>
        	<div id='name-label'>姓:</div>
		    	<input type="text" id='name-box' name="LastName" value="<?php echo $_SESSION['LastName'];?>" required>
    			<div id='name-label'>名:</div>
					<input type="text" id='name-box' name="FirstName" value="<?php echo $_SESSION['FirstName'];?>" required>
        </div>
        <br/>	
	      <div id='label'>
	        	<div id='label-a'>メールアドレス</div><div id='label-b'> ※必須項目</div>
        		<div id='label-c'> <?php if($error_flg == 2){echo $error_mes;}?></div>
        </div>
	      <div id='email'>
	        <div id='email-label'> 本番用:</div>	
	        <input type="email" id='email-box' name="adress1"  value="<?php echo $_SESSION['adress1'];?>" required>
				</div>
				<div id='email'>	
					<div id='email-label'> 確認用:</div>
						<input type="email" id='email-box'  name="adress2" value="<?php echo $_SESSION['adress2'];?>" required>
				</div>
				<br/>
				<div id='label-a'>件名</div>
				<input id='subject-box' type="text" name="subject" value="<?php echo $_SESSION['subject'];?>" >	
				<br/><br/>
        <div id='label'>
	        	<div id='label-a'>メッセージ</div><div id='label-b'> ※必須項目</div>
	        	<div id='label-c'> <?php if($error_flg == 3){echo $error_mes;}?></div>
	      </div>
        <textarea id='text-box' rows="10" name="message" required><?php echo $_SESSION['message'];?></textarea>
 				<div>
					<button class='btn btn-success' name="action" value="confirm">確認する</button>
				</div>
			</form>
		</div>
	</div>
</div>

<style>
	#title{
		text-align: center;
		font-size:20px;font-size:1.25rem;}
	#form{font-size:14px;font-size:0.875rem;}
	#label{
		display:flex;
		align-items:flex-end;}
	#label-a{font-weight:bold;}
	#label-b{font-size:12px;font-size:0.75rem;}
	#label-c{color:#ff0000;}
	#name{
		display:flex;
		align-items:center;}
	#name-label{margin-left:0.875rem;}
	#name-box{width:35%;}
	#email{
		display:flex;
		align-items:center;
		margin-bottom:5px;}
	#email-label{margin-left:0.875rem;}
	#email-box{width:70%;}	
	#subject-box{width:78%;margin-left:0.875rem;}
	#text-box{width:95%;margin-left:0.875rem;margin-bottom:10px;}
</style>

※1.先頭の不正アクセスチェックはmain.phpから呼ばれてなければ何もしないで終了します。

※2.先頭のid=’background’,’page-contener’,’page-contener-data’は、固定ページと同様な位置に表示させる為のidです。

※3.フォームのメソッドをmethod=”post”にしてあるので、入力されたデータの受け取りは$_POST[××]で受け取ります。

※4.フォームのアクションをaction=””にしているので、サブミットされた時の飛び先は自分(main.php)になります。

※5.サブミットボタンはBootstrapのカラーボタンを利用しています。
このボタンの中にname=”action” value=”confirm”を指定しているの戻り先のmain.phpで$_POST[action]の値は、confirmで戻ります。

※6.input文等の所でrequiredを指定しています。
これは入力チェックをブラウザにしてくれ!というコマンドです。
これを指定するとブラウザが空白チェックやe-mailアドレスチェックを行ってくれます。

※7.ピンクの<?php echo $_SESSION[‘LastName’];?>等はcheck.phpの処理結果からこの画面に戻った時の既入力データやエラーメッセージです。

main.php→input.php→main.phpの次にこのプログラムが呼ばれます。

check.phpのプログラムは下記になります。

<?php
/*******************************
 エラーチェック
 *******************************/
/* Reset SW */
$error_mes='';
$error_flg=0;
/* get data set */
$_SESSION['LastName'] = $_POST['LastName'];
$_SESSION['FirstName'] = $_POST['FirstName'];
$_SESSION['adress1'] = $_POST['adress1'];
$_SESSION['adress2'] = $_POST['adress2'];
$_SESSION['subject'] = $_POST['subject'];
$_SESSION['message'] = $_POST['message'];
/* 名前欄のチェック */
if(is_my_blank($_SESSION['LastName']) || is_my_blank($_SESSION['FirstName'])){
	$error_flg=1;
 	$error_mes='・お名前欄が空白です。再入力をお願いします';}
/* メールアドレス欄のチェック */
if($_SESSION['adress1'] !== $_SESSION['adress2']){
	$error_flg=2;
 	$error_mes='・メールアドレスが一致しません。チェックをお願いします';}
/* メッセージ欄のチェック */
if(is_my_blank($_SESSION['message'])){
	$error_flg=3;
 	$error_mes='・メッセージ欄が空白です。何かメッセージをご記入ください';}		
 
/* 半角、全角スペースを判断する関数 */ 
function is_my_blank($str)
{
  if(preg_match('/[^\s ]/',$str))
  	{return false;}
  else
  	{return true;}
}
?>

※1.始めにinput.phpで入力されたデータを $_POST[××];で受け取り$_SESSION[‘××’]にセットしています。これにより入力データはディスクに保存されるのでsendmail.php等でディスクからデータが読み出す事が可能になります。

※2.input.phpの必須入力エリアにrequiredを指定しているので、一般的なエラーチェックはブラウザが行ってくれます。
しかしブラウザでチェックできないのは下記になります。

①テキストやテキストエリアに半角または全角のスペースが入力された場合。

②メールアドレスと確認メールアドレスが異なる場合

これららがあった場合は$error_flg$error_mesにデータをセットしてmain.phpに戻ります。

check.phpでエラーが無い場合はconfirm.phpが呼ばれます。

confirm.phpのプログラムは下記になります。

<?php
/*******************************
 お問い合わせフォーム 確認画面
*******************************/
// 不正アクセスチェック
if(!$noindexaccess){header("HTTP/1.0 404 Not Found");exit();}
?>

<div id='background'>
	<div id='page-contener'>
		<div id='page-contener-data'> 
			<div id='title'>*** お問い合わせ確認画面 ***</div>
			<div id='msg'>以下の内容でよろしければ[送信する]ボタンを押してください。</div>
			<form  method="post" action="" enctype="multipart/form-data" id='form' onsubmit="return DoubleClick();">
    		<div id='label'>お名前</div>
    		<div id='waku1'><?php echo $_SESSION['LastName'].$_SESSION['FirstName'];?></div>

    		<div id='label'>メールアドレス</div>
        <div id='waku1'><?php echo $_SESSION['adress1'];?></div>
        		
    		<div id='label'>件名</div>
        <div id='waku1'><?php echo $_SESSION['subject'];?></div>
    
    		<div id='label'>メッセージ</div>
        <div id='waku2'><?php echo nl2br($_SESSION['message']);?></div> <!-- 改行文字付出力 -->
    		
    		<div>
        		<button class='btn btn-danger' name="action" value="">修正する</button>
        		<button class='btn btn-success' name="action" value="sendmail" >送信する</button>
    		</div>
			</form>
   </div>
 </div>
</div>

<style>
	#title{
		font-size:20px;font-size:1.25rem;
		text-align: center;margin-bottom:10px;}
	#msg{font-size:14px;font-size:0.875rem;margin-bottom:10px;}
	#form{font-size:14px;font-size:0.875rem;}
	#label{font-weight:bold;}
	#waku1{
		border:solid 1px #c0c0c0;
		border-radius: 5px;
		box-shadow:2px 2px #c0c0c0;
		padding:5px 10px;
		margin-left:0.875rem;margin-bottom:10px;
		width:60%;}
		#waku2{
		border:solid 1px #c0c0c0;
		border-radius: 5px;
		box-shadow:2px 2px #c0c0c0;
		padding:5px 10px;
		margin-left:0.875rem;margin-bottom:10px;
		width:90%;}
</style>

<script>
	//メール送信のダブルクリック対策
	var count=0;
	function DoubleClick() 
		{
			if(count == 0){count=1;return true;} 
			else {return false;}
		}
</script>

※1.確認画面には修正ボタンと送信ボタンが設定されています。

※2.送信ブタンをダブルクリックするとメールが2通飛びます。そこでこれを防止する対策を組み込んでします。

フォームにあるonsubmit=”return DoubleClick();“がその機能になります。

onsubmitは、サブミットされる前に実行させれるコマンドです。

onsubmit=”return true”の場合は、サブミットが実行されます。

onsubmit=”return false”の場合は、サブミットしないで処理が終了します。

よってDoubleClick()関数で下記の処理をします。

1回目のCALLはカウンタをセットし、trueで戻ります(メールが送られる)

2回目のCALLはカウンタがセットされているのでfalseで戻ります(メールは送らない)

これにより、ダブルクリックされてもメールは1回しか飛びません。

※3.メッセージ欄($_SESSION[‘message’])は、改行が入った文書になっています。

これをそのままechoすると改行は無視されます。

そこでecho nl2br($_SESSION[‘message’])で改行が表示されます。

nl2brは指定された文字列に含まれる全ての改行文字(\nなど)の前に、HTMLの改行タグ(<br />など)を挿入するPHP関数になります。

最後はメール送信プログラムです。

sedmail.phpのプログラムは下記になります。

<?php
/*******************************
メール送信
*******************************/
// 不正アクセスチェック
if(!$noindexaccess){header("HTTP/1.0 404 Not Found");exit();}

/* メール宛先設定(必ず正確なメールアドレスを指定します) */
$to='××@▲▲';

/* 件名設定 */
if($_SESSION['subject'] == ''){$subject='お問い合わせ';}
else{$subject=$_SESSION['subject'];}

/* 本文設定はサイトに合わせて修正して下さい */
$message=
		'このメールはホームネットワーク研究所のお問い合わせフォームから送信されました'."\n".
		'差出人:'.$_SESSION['LastName'].$_SESSION['FirstName']."\n".
		'メールアドレス:'.$_SESSION['adress1']."\n"."\n".
		'件名:'.$subject."\n"."\n".
		'<質問内容>'."\n".
		$_SESSION['message'];

/* メールヘッダ設定 */
$headers[0] = 'From:ホームネットワーク研究所 <✖✖@▲▲>';/* 送信先メールアドレスを設定して下さい */
$headers[1] = 'Reply-To:'.$_SESSION['LastName'].$_SESSION['FirstName'].'<'.$_SESSION['adress1'].'>';
?>

<div id='background'>
	<div id='page-contener'>
		<div id='page-contener-data'>
			<?php $mail_flg = wp_mail($to,$subject,$message,$headers);?> 
			<?php if($mail_flg):?>
				<div id='msg'>メールは正常に送信されました。<br/>
				    後日、メールにて連絡させて頂きます。<br/>
				    ご返信に時間がかかる場合がございますのでご了承下さい。</div>
				<?php unset($_SESSION['LastName'],$_SESSION['FirstName'],$_SESSION['adress1'],$_SESSION['adress2'],$_SESSION['subject'],$_SESSION['message']);?>
<?php else:?>
					<div id='msg'>メールが正常に送れませんでした。<br/>
					   [email protected]に直接メールして下さい。<br/>
					   申し訳ありません。</div>
			<?php endif;?>
		</div> 
	</div> 
</div>

<style>
	#msg{font-size:14px;font-size:0.875rem;}
</style>

※1.$toと$headersは、必ずあなたのメールアドレスを設定して下さい。

※2.$messageに改行を入れるのに“¥n”を利用しています。
‘¥n’では改行は入りません。

※3.wp_mail($to,$subject,$message,$headers) でメールを送りますが$headersに複数の返信先を指定できます。詳細はプログラムを見て下さい。

※4.最後にunset関数で、ディスクに保存したセッションデータをクリアしています。

 

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wprdpress-ad」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressからメールを送る為に下記の様な色々なプラグインを利用してきました。 ①WP Mail SMTP ■昔は簡単なプラグインだったが機能が拡張された時に障害が発生した段階で使用を断念。 ②Gmail SMTP […]

SynologyでWordPressを運用している時に、遅い!と感じる状況に遭遇しました。対策は①All in One SEOと②WP Mail SMTPの廃止です。この経緯を説明しています。

ここではWordPressからGmailのSMTPを介してメールを送る為に「Gmail SMTPプラグイン」を利用する方法を解説しています。このプラグインは「SMTP認証にOAuth2.0プロトコル」を利用するので、Gmailのセキュリティを守る事ができます。

WordPressサイトの公開後のプログラム変更は、サイトダウン等の危険性があるので難しくなります。そこで、私が行っているSyonologyを2台使った開発環境構築事例を紹介しています。

WordPressのメジャーアップデート(5.5や5.6)ではWordpressの更新が失敗する事があります。このような時にサイトを修復する方法を解説しています。

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

ここでは、SynologyのNASの中でWordPressがどの様に稼働するか?を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

SynologyのNASのphpmyadminのセキュリティ対策として2要素認証を利用する方法を解説しています。尚、スマホを紛失した時の対応方法も解説しています。