4K対応HPの制作 part2

こちらの続きとなります。

あまり4Kと関係ないこともかいていますが・・・

Wordpressである痕跡をなくす。

別にWordpressが恥ずかしいとかそういうのではないのですが、

cd wp-content

と非常に長文で打ちずらいのが理由です。

更に、手抜きしようとして

# cd wp*
su: cd: too many arguments

とういう落ちになるのも不快でした。

こちらの記事を参考にして、シンボリックリンクを張ります

更に痕跡をなくす

プラグインが使用しているものを取り外すと、それなりにWordpressっぽくなくなります。

functions.php

function load_recaptcha_js() {
	if ( ! is_page( 'contact' ) ) {
		wp_deregister_script( 'google-recaptcha' );
		wp_deregister_script( 'wpcf7-recaptcha' );
		wp_deregister_script( 'contact-form-7' );
		wp_deregister_style( 'contact-form-7' );
	}
	wp_deregister_style( 'wp-block-library' );
	wp_deregister_style( 'ppress-frontend' );
	wp_deregister_style( 'ppress-flatpickr' );
	wp_deregister_style( 'ppress-select2' );

	$paths = explode("/", $_SERVER['REQUEST_URI']);

	wp_dequeue_style( 'global-styles' );

	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'wp_print_styles', 'print_emoji_styles', 10 );

	remove_action('wp_head','rest_output_link_wp_head');
	remove_action('wp_head','wp_oembed_add_discovery_links');
	remove_action('wp_head','wp_oembed_add_host_js');
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );
add_filter( 'emoji_svg_url', 'return false' );

function noglobal($buffer) {
	$search = array(
		'/<style id=\'global-styles-inline.+?\/style>/s',
//		'/<link rel=\'dns-prefetch\' href=\'\/\/s.w.org\'.+? >/s',
		'/<link rel="https:\/\/api.w.org\/" href="\/wp-json\/" \/>/s',
//		'/\#wpadminbar \{ display\:none; \}<\/style>/s',
		'/<link rel="EditURI" type="application\/rsd\+xml" title="RSD" href=".+?">/s',
		'/<link rel="wlwmanifest" type="application\/wlwmanifest\+xml" href="\/wp-includes\/wlwmanifest.xml"> /s',
//		'/<style type=\"text\/css\"><\/style>/s',
	);
	$replace = array(
		'',
		'',
		'',
		'',
		'',
		'',
		''
	);
	$buffer = preg_replace($search, $replace, $buffer);
	return $buffer;
}
ob_start("noglobal");

逆bootstrap みたいなものを作る

bootstrap では 画面を12分割で考え、使用するボックスの値を指定するのですが、4K対応においてかえってこれが難しかったりします。

2Kならちょうど横に12個あってもいいものですが、4Kなら24個入ってもよさそうなので、12個までの制限しかないbootstrapでは苦痛となります。

そのため、bootstrapと真逆のフレックスボックスを作成

col-7-xl とかやると、横に7個のボックスを作る
col-19-hd4k とかやると、横にに19個のボックスを作る
とか中途半端なことができます。

makeflexstrap.pl

#!/usr/bin/env perl

# bootstrapと逆の方法でflexboxを作る
#
# 一例
# col-xs-1 : 1画面を1分割して1つ表示する
# col-lg-1 : 1画面を1分割して1つ表示する
# col-lg-7 : 1画面を7分割して1つ表示する

BEGIN {
	push @INC, ".";
}

$flex{"xxs"}=0;
$flex{"xs"}=412;
$flex{"sm"}=576;
$flex{"md"}=768;
$flex{"lg"}=992;
$flex{"xl"}=1200;
$flex{"xxl"}=1400;

#$flex{"sp"}=0;
#$flex{"pc"}=992;

$flex{"hd2k"}=1401;
$flex{"wqhd"}=1921;
$flex{"hd4k"}=2561;
#$flex{"hd8x"}=3841;

&flexstrap;

sub flexstrap {

	print <<EOM;

.flexBox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: auto;
//	justify-content: space-between;
	justify-content: space-evenly;
	align-items: top

}

/* https://senoweb.jp/note/displayflex-tip/ */

.flexBox article {
//    width: 48%;  /* お好みの幅で指定 */
//    padding:16px;  /* お好みの幅で指定 */
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
}

.flexBox:after {
    content: "";
    display: block;
//    width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

EOM
	foreach $width(keys %flex) {
		if($width eq "xxs") {
			print <<EOM;
.col-xxs-4,  .col-xxs-3,  .col-xxs-2,  .col-xxs-1 {
	width: 100%;
	margin: 0 0 30px;
}
EOM
		} elsif($width eq "xs") {
			print &makecss($width, int($flex{$width}/100), 15);
		} elsif($width eq "sm") {
			print &makecss($width, int($flex{$width}/100), 50);
		} else {
			print &makecss($width, int($flex{$width}/100), 150);
		}
	}

#	print <<EOM;
#*/
#EOM
}

sub makecss {
	my($width, $count, $px)=@_;
	my $css;
	$css=<<EOM;

// Size $width total $count class
\@include mq($width) {
EOM
	for($i=1; $i<=$count; $i++) {
		$css.=<<EOM;
	.col-$width-$i {
		width: calc(100% / $i + @{[$px]}px);
	}
EOM
	}
	$css.="}\n";
	return $css;
}

これ以外にも、CSS上で計算 (calc) をさせる手法を多く用いてます

可能な限り単位は vw、vh

どの大きさでも対応できるように、デバイスの最大サイズをもとにした
単位の指定を行ってます

ちなみに

width: 20vh;
height: 10vw;

という、width/height逆の指定も可能なので、活用しています。

記事はJSONで配信をしようとした

さすがに全部ではないのですが、Wordpress記事のJSON配信化を行い、それなりにWordpressっぽくなくなっています。

JSON配信を行うことで、自作で無限スクロールを実装できてしまいました。
※phpスキルまだ5か月なのに

カレンダー機能は完璧自作

このHTMLをもとに、php上の生成によるsvgと、jQuery + JSON での表示に対応し、更にWordpressっぽくなくなっています。