WordPress カスタマイズ覚書（ブランクテーマなど）

1月 16, 2024

目次

ブランクテーマ

_s(underscores)でテーマ作成するための準備

https://olein-design.com/blog/ready-for-creating-theme-by-underscores

themeの日本語化

スライダー(slick)

jQuery(function() {
	jQuery('.top-images').find('.wp-block-group__inner-container').slick({
		arrows: true,
		centerMode: true,
		// centerPadding: '170px',
		dots: true,
		infinite: false,
		initialSlide: 2,
		slidesToShow: 1,
		slidesToScroll: 1,
		responsive: [{
			breakpoint: 1024,
			settings: {
				// centerPadding: '87px',
				initialSlide: 1,
				slidesToShow: 1
			}
		}]
	});
});

jQuery('.wp-block-group__inner-container').slick();

ファイルコンバーター

https://convertio.co/ja/

Google Chromeでもfont-sizeを10px以下で表示させるCSS

https://blog.upshare.co.jp/2017/07/3730/

使えそうなプラグイン

Mobile Menu

使いやすいWordPressレスポンシブモバイルメニュー。モバイル訪問者の関心を維持します。

  • Max Mega Menu
    使いやすいメガメニュープラグイン。WordPressの方法で書かれました。
  • Responsive Menu
    WordPress用の高度にカスタマイズ可能なレスポンシブメニュープラグイン
  • WP Responsive Menu
    WP Responsive Menuは、高度にカスタマイズ可能なレスポンシブメニューをWordPressサイトにすぐに追加できるモバイルメニュープラグインです

Post Grid by PickPlugins

Awesome post grid for query post from any post type and display on grid.

Yoast Duplicate Post

簡単な書き換えと再公開機能を含む、投稿と固定ページ複製用の頼りになるツール。

スライダー系

今回は、プラグインは使わずに、slick を使いました。

【jQuery】スライダープラグイン「slick」実装サンプル集

  • FooGallery
    FooGalleryは、WordPress用にこれまでに作成された中で最も直感的で拡張可能なギャラリー管理ツールです。
  • Responsive Lightbox & Gallery
    Responsive Lightbox＆Galleryを使用すると、ユーザーはギャラリーを作成し、モバイルデバイス用に最適化されたライトボックス
  • Smart Slider 3
    smart slider31WordPress 用の完璧なオールインワンレスポンシブスライダーソリューション。

要素を左右中央に

left: calc(100% / 2);
top: 0;
transform: translate(-50%, -50%);

横並びを縦並びにするテーブルレスポンシブ

https://b-risk.jp/blog/2018/07/table-css/

デザインの横幅

カテゴリ別のアーカイブ

  • 【WordPress】wp_get_archivesを使わずに特定カテゴリーの年月アーカイブリストを表示したい
    https://www.rcnt.jp/blog/wordpress-wp_get_archives/
  • collapsing-archives これがやりたかった！WordPressで月別アーカイブの折りたたむ方法
    https://hitoxu.com/01604
  • WordPress｜ショートコード｜WP_Queryで投稿一覧を表示
    https://qiita.com/tomokei5634/items/1b1ba9eee3b1dee282df
function monthly_blog_archive_code() {
	$cat_slug = 'blog';
	$args = array(
		'category_name' => $cat_slug,
		'posts_per_page' => -1
	);

	$archive_query = new WP_query($args);

	while ($archive_query->have_posts()) {
		$archive_query->the_post();
		$archive_list[get_the_time('Y/n', $post->ID)][] = $pst->post_title;
	}
	wp_reset_postdata();

	$archive_html = '<div class="archive"><h2>Archive</h2>\n<ul>\n';

	if ($archive_list):
		foreach ($archive_list as $year_month => $archive):
			$year_month_arr = explode('/', $year_month);
			$archive_html .= '<li><a href="' . esc_url(home_url($year_month . '/?cat_slug=' . $cat_slug)) . '?>';
			$archive_html .= '</a></li>';
			/*
			<a href="<?php echo esc_url( home_url( $year_month.'/?cat_slug='.$cat_slug ) ) ?>">
				<?php echo $year_month_arr[0].'年'.$year_month_arr[1].'月' ?> [<?php echo count( $archive ) ?>]</a></li>			*/
		endforeach;
	endif;

	$archive_html .= "</ul></div>\n";
	
	return $archive_html;
}
add_shortcode( 'monblogarchive', 'monthly_blog_archive_code' );
  • ホームページ上に唯一のカテゴリーを表示
    https://wpdocs.osdn.jp/プラグイン_API/アクションフック一覧/pre_get_posts (リンク切れ 2024/1/16)
    https://codex.wordpress.org/Plugin_API/Action_Reference

【slick】ロード時に一瞬縦並びになるのをCSSで解決する

https://www.granfairs.com/blog/staff/slick-solve-tandem

その他

  • .aiファイルの読み込み。
    https://www.photopea.com/
    • 今回は、ファイルは読み込めるが、デザインが崩れて使えませんでした。
  • 画像を一括エクスポート oraへエクスポートして、pngを取り出し
    https://qastack.jp/ubuntu/485917/gimp-export-every-layer-as-a-separate-png-image
  • AIファイルから使いたいイラストだけを抜き出して使用する手順
    https://pc-pier.com/blog/2018/12/25/editsoft-gimp5/
  • CSSだけで、円形や曲線に沿ったテキスト配置
    https://www.conifer.jp/csstest/css-circle-text.html?PHPSESSID=2i2pujk4tgs740tbth5houucj0
  • svg要素を使って、曲線のパスに沿ったテキスト
    https://www.conifer.jp/csstest/svg-path-text.html
  • TrueTypeフォントとOpenTypeフォントの違い
    https://www.freejapanesefont.com/jiyucho-free-download/
  • Mac Font インストール
    https://support.apple.com/ja-jp/HT201749
  • font-size:62.5%で要素の幅や高さにrem使用は注意
    https://qiita.com/akuden/items/24b4ea6caa1b3dc1cccd
  • OS、ブラウザごとのCSSハックなどまとめ
    https://qiita.com/katsunory/items/0cbb26bf23d961161642
  • ブラウザやOSごとにCSSを適応させるCSSハックいろいろ
    https://blanche-toile.com/web/css-hack
  • そのベンダープレフィックス、いつまでつけてるの？
    https://qiita.com/amamamaou/items/42197e443134478befaf
  • ポストグリッド/ポストスライダーのカスタム抜粋の抜粋の長さ
    https://kriesi.at/support/topic/excerpt-length-for-custom-excerpt-on-post-grid-post-slider/
  • VisualComposerポストグリッドでタイトルの長さを制限する方法
    https://stackoverflow.com/questions/38747242/how-to-limit-title-length-with-visual-composer-post-grid
  • 【CSS】テキスト(見出し，タイトル)に横線をつける方法
    https://www.rectus.co.jp/archives/105
    途中まで線
  • タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
    https://timing-web.com/textborder/
    横幅全体に線
  • 【WordPress】wp_get_archivesを使わずに特定カテゴリーの年月アーカイブリストを表示したい
    https://www.rcnt.jp/blog/wordpress-wp_get_archives/

WordPress,プログラム開発

Posted by iwadjp