わずか1ページしか存在しないページをWordpressで書いたクソ記録

当社ではいつか募集することになるんです。
毎年募集しています。

その募集サイトをペライチから完全移植することになりました。

## ヘッダとフッタは従来の会社HPのものと同じ

めんどくさい、ではなく、会社内でもデザインが統一感があると、安心も感じられるのではないかと思います

## 無駄に4K対応

4K画面で正しく最大化されてもきちんと閲覧できるように配慮

## 無駄なギガは使わない

画像の横解像度リストは、今回は以下の通りです

3840,2600,2160,1920,1680,1284,1100,992,810,768,750,576,512,428,414,412,375,312,288,256,214,207

もちろん、perl と b-shellでMakefileを作って生成するのですが

## ペライチからダウンロードしたものが

Internet Explorer （これだけの為にまだ現役です）での、サイトダウンロード機能でダウンロードしてみたのですが

- JavaScript 637,684bytes
- CSS 371,794bytes

こんなにあってびっくりです。

こりゃ、ペライチは重いわ

## そういえば画像もダウンロードしたのですが

これは担当君が悪いんです。

横300ぐらいで必要な画像が、横1200とか解像度あったりとか

まぁ、オリジナル画像はゲットできたものの、
これでWebサイト表示する側は重さで怒りが溜まらない

## ペライチはwebpとかavifに対応してない

ということで、おなじみの画像変換をして

## 直接HTML書かせたくないから、こんな状態に

ペラのページは16セクションありました。
Wordpressのメニューに搭載すると、こんなに膨大に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/9ff21dc8-e95c-a428-50e2-678b580252a5.png)

完全にスタイルがCSSに依存するように、きれいなHTMLを書くためには、これしかなかったのです。

うちの会社の担当君なら、<br>タグをいっぱい連続させそうで。。。。

## ペライチから出力されたHTMLは解析しずらい

まぁ、一応商用サービスですしね。

全く同一のものを全く別の記法で記述

:::note info
でも、ホームページビルダーの自由配置モードよりは一応はマシ
:::

## Wordpressは、ただの特化型記事エディタになったわけです。

でも、それが本来あるべき姿なのかもしれません。
投稿も、固定ページも１つも書かず

## 唯一使ったのは、Contact Form 7

JavaScriptでAPIから状況が帰ってくるので、使いやすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/f15e2cd2-e87b-0a96-ccc8-1426be42d01d.png)

これだけでうまく動くかわかりませんが、↑のコードだけでも提示してみます。

```script.js
/* 足りない関数は補完のこと */
	var	_footermenu = $(".footerFloatingMenu"),
		popuparray=[],
		popupflg=0,
		popupopen=undefined,
		func0, func1, func2, func3,
		contactcook="test";

	function popup(array) {
		if(array !== undefined)
			popuparray.push(array);

	}

	function popupview(mode) {
		if(mode == "open") {
			if(popuparray[popupflg] !== undefined) {
				if(popupopen === undefined && popuparray[popupflg][1] > -1) {
/* フォント読み込まない
					if(!popupflg) {
					    // ↓Google Web Fonts から Material Icons を読み込み
						var iconcss = document.createElement('link');
						iconcss.href = '//fonts.googleapis.com/icon?family=Material+Icons';
						iconcss.setAttribute('rel', 'stylesheet');
						document.head.appendChild(iconcss);
					}
*/
					var timer= popuparray[popupflg][1],
						color= popuparray[popupflg][2],
						str  = popuparray[popupflg][3];

					str='<p class="popupClose"><span></span><span></span></p>' + str;
					func0= popuparray[popupflg][4],
					func1= popuparray[popupflg][5],
					func2= popuparray[popupflg][6],
					func3= popuparray[popupflg][7],


					_footermenu.css("background",color);
					_footermenu.html(str);

					_footermenu.addClass('open');
					if(timer > 0) {
						enableclose=1;
						setTimeout(function() {
							popupview("close");
						}, timer);
					} else
						enableclose=0;

					popuparray[popupflg][1]=-1;
					popupopen= popuparray[popupflg][0]
					popupflg++;
				}
			}
		}
		if(mode == "close") {
			if(func0 !== undefined)
				func0();

			_footermenu.removeClass('open');
			setTimeout(function() {
				popupopen=undefined;
				_footermenu.html("");
				popupview("open");

				if(setting_reload)
					document.location.reload();

			}, 500);
		}

	}

	var wpcf7Elm = document.querySelector( '.wpcf7' );

	wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
		popup(mailsent(
			resc('forminput'),
			"rgba(127,127,0,0.8)"
		));
		popupview("open");

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				t.prop('disabled', false);
				t.val(resc('send'));
			}, 300);
		});
	}, false );

	wpcf7Elm.addEventListener( 'wpcf7spam', function( event ) {
		popup(mailsent(
			resc('formspam'),
			"rgba(192,0,0,0.8)"
		));
		popupview("open");

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				t.prop('disabled', false);
				t.val(resc('send'));
			}, 300);
		});

	}, false );
	 
	wpcf7Elm.addEventListener( 'wpcf7mailfailed', function( event ) {
		popup(mailsent(
			resc('formerror'),
			"rgba(127,107,10,0.8)"
		));
		popupview("open");

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				t.prop('disabled', false);
				t.val(resc('send'));
			}, 300);
		});

	}, false );

	wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
		popup(mailsent(
			resc('formcomplete'),
			"rgba(10,107,149,0.8)"
		));
		popupview("open");
		$("textarea").trigger('autoheight');

		$('input[type="submit"]').each( function() {
			var t=$(this);
			setTimeout(function() {
				//t.prop('disabled', false);
				t.val(resc('sent'));
			}, 300);
		});
	}, false );

	function mailsent(msg, color, flg) {
		return [
			"contact",
			9999,
			color,
			flg === undefined ? 
				sprintf(
					"<p>" + resc('formmsg') + "</p><p>%s</p>"
					, msg
				)
			 : sprintf("<p>%s</p>", msg)
		];
	}
```