作業する場所

フォルダを作る場所は基本的にホームディレクトリをお勧めします。ファインダー > command + shift + g > 移動

何か作る際はホームディレクトリでフォルダを作成して、その中で作業しましょう。

winマーク右クリック → 設定 → アプリ → オプション機能 → Windowsのその他の機能 → 「Windows の機能の有効化または無効化」を開く リストから「Linux用Windowsサブシステム」を探し、チェックを入れる 再起動 WSL に Linux ディストリビューションをインストールするhttps://apps.microsoft.com/store/detail/ubuntu-on-windows/9NBLGGH4MSV6?hl=ja-jp&gl=jp&activetab=pivot%3Aoverviewtab Windows Terminal をインストールするhttps://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=ja-jp&gl=jp

スタートメニューで Ubuntu と入力すると Ubuntu が出てくるので、それをクリックして起動させるとコマンドライン操作が可能になります。ubuntu を立ち上げてユーザー名を登録します。ユーザー名の登録が完了したらパスワードの設定。この時打ち込んでも画面に表示されません。その後、先ほど入力したパスワードをもう一度入力。これで初期設定完了です！

Ub

https://twitter.com/IchiShiogao/status/1643773670278709250?s=20

「あなたは私のプロンプトクリエイターです。あなたのゴールは、私のニーズに合った最高のプロンプトを作ることをサポートすることです。そのプロンプトは、あなた、ChatGPTが使用することになります。 次のようなプロセスを踏んでください。 1. あなたの最初の応答は、プロンプトが何のためのものか、プロンプトの目的を私に質問してください。私の答えを受け、以下ステップの通り、継続的に反復してプロンプトを改善してください。 2. a) 改訂版プロンプト（書き直したプロンプトを提供する。明確で簡潔で、あなたが理解しやすいものでなければならない）、 b) 提案（プロンプトを改善するためにプロンプトに含めるべき詳細について提案する）、 c) 質問（プロンプトを改善するために私が必要とする追加情報に関して関連質問をする）。 3. 私があなたに追加情報を提供し、あなたが「改訂版プロンプト」セクションでプロンプトを更新するという、この繰り返しプロセスを、プロンプトが完成するまで継続します。」

読み込まれる前の画像を表示させない方法

slickを使うと、ページを読み込んだ際にスライダーになる前の画像が表示されてしまう。それを解消するには以下のcssを加える。

// slick .slider { visibility: hidden; } .slider.slick-initialized { visibility: visible; }

.slider は、親要素に自分がつけたcssの名前にする。.slick-initialized は、slick.jsの読み込み完了後、スライダーの準備ができた状態になるとスライダー要素に対して付与されるクラス名。

画面が横幅１００％を超してしまう

画面いっぱいに画像を表示している場合、buttonの矢印がはみ出して横スクロールできるようになっているケースがある。その場合、.slick-next, .slick-prev の場所や位置を変える必要がある。

.slick-next, .slick-prev { z-index: 1; } .slick-next { right: 10px; } .slick-prev { left: 10px; }

もしくは矢印を非表示にする。cssでも良いが、jsで指定する

https://codepen.io/bibibig/pen/zbPapb

スマホでも綺麗に動く

前回のsingletonに引き続き、インスタンス化をすすめていきます。

以下作成inc/class-テーマ名-theme.php

<?php /** * Bootstraps the Theme. * * @package Note */ namespace NOTE_THEME\Inc; class NOTE_THEME { use Singleton; protected function __construct() { // Load class. $this->setup_hooks(); } protected function setup_hooks() { // actions and filters } }

functions.phpに追加

function aquila_get_theme_instance() { \NOTE_THEME\Inc\NOTE_THEME::get_instance(); } note_get_theme_instance();

実際にロードされているか確認してみる場合、以下のように書いてみて、helloと画面に書かれているか見てみましょう

以下URLのmaster を 「feature/add-singleton」に変更し、aquila/inc/helpers/autoloader.phpaquila/inc/traits/trait-singleton.phpを自分のテーマに入れる。ファイルをクリックし、Rawをクリック後、全選択してコピーして貼り付け。https://github.com/imranhsayed/aquila

function.php の頭に追加

if ( ! defined( 'NOTE_DIR_PATH' ) ){ define( 'NOTE_DIR_PATH', untrailingslashit( get_template_directory() ) ); } require_once NOTE_DIR_PATH . '/inc/helpers/autoloader.php';