WordPress カスタマイズ覚書

4月 10, 2024

Cocoon をベースに、デザインに寄せる対応で使った手法など。

目次

便利に使える

  • サイトディレクトリ構成 https://inabak.com/folder-structure-best/ 2021/11/15 リンク切れ
  • ダミー画像作成サイト
  • 画像測定サイト https://cloud-util.appspot.com/ImageMeasure 2021/11/15 リンク切れ

Chrome拡張

  • カラーピッカー　ColorZilla　https://www.colorzilla.com/
  • Webページ測定　Page Ruler Redux　https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal/reviews?hl=ja

content内の改行

header::after {
  white-space: pre;
  content: '一行目\A２行目';

padding と margin

paddingはどんな時に使う？ポイントは２つ
    point01：要素の範囲を広げたい時
    point02：子要素を内側に押し込めたい時
marginはどんな時に使う？ポイントは１つ
    point01：別の要素との距離を取りたい時
paddingかmarginどちらをつけるか迷ったら？ 良いサイトを見る
marginとpaddingの使い分けその1・背景画像や背景色を余白部分に表示させたい時はpaddingを使う
marginとpaddingの使い分けその2・隣合うHTML同士の余白を空ける時はmarginを使用
marginとpaddingの使い分けその3・marginを使用する際は極力、上下方向についてはどちらか片方に統一して適用する
marginとpaddingの使い分けその4・親要素と子要素の余白を空けるのはpaddingを使用する
  • text-size-adjust
    • text-size-adjust プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。
    • これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

htmlを書くとき <br>か<br />か

  • https://qiita.com/kobashitakashi/items/929bb3d879875b421d76
    • これからhtml5で書くときには、はどちらでもよく、スラッシュはないほうを推奨されているようなので、html5では無しでOK、古いサイトを修正するとき、それがXHTMLだったときにはつける、というのが正しい書き方になるようです。
  • img object-fit　https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
    • contain レターボックス cover 切り取り

【2020年4月修正追記】レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ
https://www.seojuku.com/blog/responsive-mediaquery.html#CSS_media_Web リンク切れ 2024/4/10

WordPress ブランカーテーマ、スターターテーマ

  • Underscoresは、スタイリング無しの状態から自作テーマを作りたい人におすすめのWordPressブランクテーマです。 https://underscores.me/
    • スターターテーマ _s を使ってWordPressのテーマをつくる（準備編） https://gatespace.jp/2012/12/19/underscores00/
  • Genericは、カスタマイズ前提で作られたシンプルなWordPressのスターターテーマです。 https://ja.wordpress.org/themes/generic/
  • Genesisは海外でかなり人気が高いWordPressのスターターテーマで、下記のような特徴があります。有料 https://my.studiopress.com/themes/genesis/

スライドショー

  • http://kenwheeler.github.io/slick/
  • スライダーエリアの外をぼやかす slider_outline の before/after で、コントロール https://www.shiseido.co.jp/elixir/index.html

Cocoon Slick

  • https://wp-cocoon.com/community/cocoon-theme/%E3%82%AB%E3%83%AB%E3%83%BC%E3%82%BB%E3%83%AB%E9%9D%9E%E4%BD%BF%E7%94%A8%E6%99%82%E3%81%A7%E3%82%82slick%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84/
  • https://webutubutu.com/webdesign/8129
  • slickのdotsが表示されない
    https://unity-right.com/slick-dots2/
  • slick センターモード
    https://tr.you84815.space/slick/settings/centerMode.html
  • slick サンプル
    https://designnokoto.com/?s=slick
    https://qiita.com/ymeeto/items/7fc56eea4bd44487cdb7
    • サムネイルをスクロールさせない
      https://takblog.site/web/?p=144
      https://gakuya.work/slick-js-thumbnail-important-point/s
      https://webhoric.com/hp/javascript/slickjs-thumbnail/
    • slick.jsのドットナビゲーションをサムネイル画像に変更する
      https://qiita.com/MikaShirahama/items/c0443cf967865e976208
      https://www.nxworld.net/jquery-plugin-slick-image-paging.html

スライドショー

スライダーエリアの外をぼやかす　slider_outline の before/after で、コントロール https://www.shiseido.co.jp/elixir/index.html

スクロール条件で画像を少し動かす

CSSで、メニュをアニメーション

カバーブロック

ヘッダの背景画像のように登録できる

要素の境界に三角形を表示する

  • border三角形 http://apps.eky.hk/css-triangle-generator/ja (2023/11/30 リンク切れ)
  • ３．ボタンにbefore擬似要素で三角アイコンを追加する https://webtant.net/201065
  • svg三角形
  • インラインSVGにHTML要素を配置する方法 https://www.it-swarm-ja.tech/ja/html/%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3svg%E3%81%ABhtml%E8%A6%81%E7%B4%A0%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/1057036138/

GIMP

画像を一括エクスポート
oraへエクスポートして、pngを取り出し

  • Fontを調べる
  • 日本語　質問形式でfont http://www.identifont.jp/identify.html 2022/5/25 リンク切れ

Cocoonの設定

Cocoonのデフォルト設定解除

設定項目Cocoonの設定箇所
サイドバー非表示
フォント
Font Awesome
全体
キャッチフレーズを表示しない
モバイルメニューボタンを表示しない
ヘッダーレイアウト トップメニュ小(右寄せ)		ヘッダー
投稿日、更新日を非表示SEO
コメント非表示
関連記事
カテゴリー
ページ送りナビ
パンくずリスト		投稿
パンくず非表示固定ページ
投稿者、投稿日、更新日を非表示本文
トップボタンへ戻るを非表示ボタン
SNSボタン非表示SNSシェア
SNSフォローボタン、RSS, FeedlySNSフォロー
フロントページタイトルタイトル
コンテンツ幅カラム
目次を表示しない目次
本文上にアイキャッチを表示しない画像
フッター　独自表記footer.php
モバイルメニュー　表示しないモバイル

.htaccess キャッシュクリア

記事一覧の WordPress プラグイン

  • Post Grid
  • Content Views
  • WP Show Post
  • WP Latest Posts
  • List category posts
  • Latest Post Shortcode

Cocoon で記事一覧

https://athemes.com/collections/best-wordpress-grid-plugins/

Essential Grid  $69
Media Grid      $25
The Post Grid   free            20,000+     ave 4.5     5s 46
The Grid        $29
Content Views (Free)            100,000+    ave 5.0     5s  272
Grid Plus (Free)                8,000+      ave 4.0     5s  14
WP Ultimate Post Grid (Free)    4,000+      ave 4.0     5s  14
Uber Grid (Premium)     $20
Media Boxes Portfolio (Premium) $23

WordPress (ワードプレス)の記事一覧プラグインおすすめ7選 |人気記事へユーザーを誘導

  • 最新投稿へのリンク　https://www.cherrypieweb.com/138
  • ペイントの画像差し替え http://office-qa.com/win/win230.htm
  • デザインが面白い https://dreamguys.co.in/

特定のテンプレートを使っているサイトを調べる

アイコン画像

WordPress で Slick を使う

  1. function.php
  2. footer.php
function xxxxxx_scripts() {
	wp_enqueue_style( 'xxxxxx-slick-style', get_template_directory_uri() . '/plugins/slick/slick.css');
	wp_enqueue_style( 'xxxxxx-slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css');

	wp_enqueue_script( 'xxxxxx-slick', get_template_directory_uri() . '/plugins/slick/slick.js');
}
add_action( 'wp_enqueue_scripts', 'xxxxxx_scripts' );
<?php wp_footer(); ?>
<script>
$(function() {
	$('.grid-items').slick();
});
</script>
</body>

CSSをチェック

https://cssstats.com/

inline a で画像やアイコンが揃わない理由

        img {
          vertical-align: middle;
          position: relative;
          top: -0.1em;
        }

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

psd

inline-blockを改行させない

white-space: nowrap; /* 自動で折り返ししない */

親のど真ん中に配置

absolute + top: 50% + left: 50% + transform: translate(-50%,-50%)で親のど真ん中に配置できる
https://saruwakakun.com/html-css/basic/centering

post_grid のqueryをダイナミックに変える

filter hooks で、多分できる
https://pickplugins.com/documentation/post-grid/filter-hooks/post_grid_query_args/

cssをブラウザ単位（IE、Chrome、FireFox、Safari）で適用する方法

_:-ms-lang(x)::-ms-backdrop, #header-container-in .contact .tel {
https://dot-blog.jp/news/css-browser-unit-apply/

その他

  • 重ねて表示する！CSSのz-indexの使い方【初心者向け】　https://techacademy.jp/magazine/8645
  • positionプロパティで位置を調節(1)　https://wp-p.info/tpl_rep.php?cat=css-intermediate&fl=r11
  • MDN 重ね合わせコンテキスト　https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • 2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ　https://webdesign-trends.net/entry/11473
  • CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説　https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html
  • HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ　https://coliss.com/articles/build-websites/operation/css/css-only-carousel.html
  • カルーセルを自作する　https://qiita.com/wintyo/items/a37a197f69aa205297a5
  • 「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選　https://liginc.co.jp/392786
  • ブラウザの仕組み: 最新ウェブブラウザの内部構造 https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#style
  • 【2020年版】游ゴシックを使ったおすすめfont-family指定　https://blog.yoshinonaco.com/font-family-2020/
  • 【WordPress】無料テーマCocoonで好きなフォントを設定するカスタマイズ！　https://plu-plu.net/cocoon-fontfree/
  • Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？　https://www.cherrypieweb.com/903
  • WOFF への変換方法　https://loumo.jp/archives/5120
  • 子テーマのディレクトリ取得関数：子テーマでも親のディレクトリが取得される
  • 【WordPress】Contact Form 7 に確認画面を追加する　https://www.smilevision.co.jp/blog/wp-contactform7addconfirm/
  • 【Contact Form 7】不要なpタグやbrタグを出力されないようにする　https://web-guided.com/1087/
    define('WPCF7_AUTOP', false);
  • 「ハンバーガー」アイコンをクリックしたら「バツ」アイコンにアニメーションする　https://haniwaman.com/parts/post-7171/

WordPress,プログラム開発

Posted by iwadjp