イセンチュートリアルサイト | イセン印刷株式会社の調べ物の為のサイト。

アーカイブした項目

カテゴリー名取得

<?php
	// カテゴリーのデータを取得
	$cat = get_the_category();
	$cat = $cat[0];

	// カテゴリー名（どちらでもok）
	echo $cat->name;
	echo $cat->cat_name;

	// ID
	echo $cat->cat_ID;

	// スラッグ（どちらでもok）
	echo $cat->slug;
	echo $cat->category_nicename;
?>

もし「1つしか使わないので短い書き方がいい」というのであれば以下のような書き方もできる。

<?php echo get_the_category()[0]->name; // カテゴリー名を取得 ?>

スラッグの取得

<?php echo $cat_slug; ?>

カテゴリー名取得　リンクあり

<?php the_category(); ?>

カテゴリー名取得　リンクなし

<?php $cat = get_the_category();
	$cat = $cat[0];
	echo get_cat_name($cat->term_id);
?>

投稿日：2022年05月13日

ページを開くと、背景が暗くなりテキストを表示

カテゴリー：モーダルウィンドウ

html


<header id="header">
	<h1>Logo</h1>
</header>

<main>
	<section>
	<h2>Area 1</h2>
		<p>使用したライブラリ：<a href="https://humaan.com/modaal/" target="_blank" >https://humaan.com/modaal/</a></p>
		<p><a href="#info" class="modal-open">お知らせを開く</a></p>
		<section id="info">
			<h2>Sale情報</h2>
			<p>11月1日～12月31日まで年末セールを開催！</p>
		</section>
	</section><!--/area1-->

	<section>
		<h2>Area 2</h2>
		<p>テキストが入ります。</p>
	</section><!--/area2-->

	<section>
		<h2>Area 3</h2>
		<p>テキストが入ります。</p>
	</section><!--/area3-->
</main><!--/main-->

<footer id="footer">
	<small>&copy; copyright.</small>
</footer>

css

/*========= モーダル表示のためのCSS ===============*/
/* infoエリアをはじめは非表示 */
#info {
	display: none;
}

/* モーダルの横幅を変更したい場合 */
.modaal-container {
	max-width: 600px;
}

/* モーダルのボタンの色を変更したい場合 */
.modaal-close:after,
.modaal-close:before {
	background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
	background: #666;
}


/*========= レイアウトのためのCSS ===============*/

header {
	background: #333;
}

h1 {
	font-size: 1.5rem;
	text-align: center;
	text-transform: uppercase;
	padding: 20px;
	color: #fff;
}

h2 {
	font-size: 1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
}

p,ul {
	margin-top: 20px;
}

ul {
	list-style: none;
}

a {
	color: #333;
	outline: none;
}

small {
	background: #333;
	color: #fff;
	display: block;
	text-align: center;
	padding: 20px;
}

section {
	padding: 30px;
}

section: nth-child(2n) {
	background: #f3f3f3;
}

img {
	max-width: 100%;
	height: auto;
}

//初回のみモーダルをすぐ出す判定。flagがモーダル表示のstart_open後に代入される
var access = $.cookie('access')
if(!access){
	flag = true;
	$.cookie('access', false);
} else {
	flag = false
}

//モーダル表示
$(".modal-open").modaal({
	start_open: flag, //ページロード時に表示するか
	overlay_close:true, //モーダル背景クリック時に閉じるか
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden'); /*縦スクロールバーを出さない*/
	},
	after_close: function(){ // モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll'); /*縦スクロールバーを出す*/
	}
});

投稿日：2022年04月07日

タブメニュー

カテゴリー：メニュー

HTML

<div class="wrapper">
	<ul class="tab">
		<li><a href="#lunch">ランチ</a></li>
		<li><a href="#drink">ドリンク</a></li>
		<li><a href="#dinner">ディナー</a></li>
	</ul>

	<div id="lunch" class="area">
		<h2>ランチ</h2>
		<ul>
			<li>ガパオライス</li>
			<li>ミートソーススパゲティ―</li>
			<li>ハンバーグ定食</li>
		</ul>
	</div><!--/area-->

	<div id="drink" class="area">
		<h2>ドリンク</h2>
		<ul>
			<li>ウーロン茶</li>
			<li>オレンジジュース</li>
			<li>ジンジャーエール</li>
		</ul>
	</div><!--/area-->

	<div id="dinner" class="area">
		<h2>ディナー</h2>
		<ul>
			<li>カレーライス</li>
			<li>ドリア</li>
			<li>グラタン</li>
		</ul>
	</div><!--/area-->
</div><!--wrapper-->

CSS

/* エリアの表示非表示と形状 */
.area {
	display: none; /* はじめは非表示 */
	opacity: 0; /* 透過0 */
	background: #fff;
	padding: 50px 20px;
}

/* areaにis-activeというクラスがついた時の形状 */
.area.is-active {
	display: block; /* 表示 */
	animation-name: displayAnime; /* ふわっと表示させるためのアニメーション */
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes displayAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/*========= レイアウトのためのCSS ===============*/

body {
	background: #eee;
}

ul {
	list-style: none;
}

a {
	color: #333;
	text-decoration: none;
}

.wrapper {
	width: 100%;
	max-width: 960px;
	margin: 30px auto;
	background: #fefefe;
}

.area h2 {
	font-size: 1.3rem;
	margin: 0 0 20px 10px;
}

.area li {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

//任意のタブにURLからリンクするための設定
function GethashID (hashIDName) {
	if(hashIDName){
		//タブ設定
		$'.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
			var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得
			if(idName == hashIDName) { //リンク元の指定されたURLのハッシュタグ（例）https://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
				var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
				$'.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
				$(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
				
				//表示させるエリア設定
				$(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
				$(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
			}
		});
	}
}


//タブをクリックしたら
$('.tab a').on('click', function() {
	var idName = $(this).attr('href'); //タブ内のリンク名を取得
	GethashID (idName); //設定したタブの読み込みと
	return false; //aタグを無効にする
});

// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function() {
	$('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
	$('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
	var hashName = location.hash;//リンク元の指定されたURLのハッシュタグを取得
	GethashID (hashName);//設定したタブの読み込み
});

引用元：https://coco-factory.jp/ugokuweb/move01/5-4-1/

投稿日：2022年04月07日

PHP_CodeSnifferを使ってエラーチェックできるようにする

カテゴリー：PHP
PHP_CodeSniffer 単体ですと、PHPのエラーをチェックをするために、ターミナルから phpcs コマンドで実行する必要があります。リアルタイムでエラーをチェックしてもらうため、Atomのパッケージ「linter-phpcs」を使用します。

1.「linter-phpcs」パッケージをインストール

Atom > Preferences > Packages から「linter-phpcs」をインストールします。

2.phpcsの実行パスを調べる

phpcsの実行パスを調べ、パスをコピーします。
```
$ which phpcs
```
```
/Users/[userName]/.composer/vendor/bin/phpcs
```
linter-phpcsの設定画面にいきます。
Atom > Preferences > Packages > linter-phpcs > Settings

Executable Path と Code Standard Or Config File を設定します。
Executable Path は上記でコピーした phpcs の実行パスを入れます。
Code Standard Or Config File は使用するコーディング規約を入れます。
画像はWordPressを使用した例です。

使用できるコーディング規約は以下のコマンドで調べることができます。
```
$ phpcs -i
```
```
The installed coding standards are PEAR, Zend, PSR2, MySource, Squiz, PSR1, PSR12, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core
```
以上で設定が完了すると以下の画像のように、リアルタイムでエラーチェック結果を見ることができます。

引用元：https://wellstone.design/384/
投稿日：2022年04月06日

PHP_CodeSniffer

カテゴリー：PHP
必要なもの
- Composer
- PHP CodeSniffer
- WordPressコーディング規約
1. Composerのインストール

PHP CodeSniffer を使用するには、PHP のパッケージ管理ソフトウェアである「Composer」をあらかじめインストールしておく必要があります。その他の PHP のパッケージ管理にも使用できます。

https://getcomposer.org/download/

インストールは上記のリンクから行います。

下記を実行
```
sudo mv composer.phar /usr/local/bin/composer
```
実行結果が下記の場合でも気にせず次の工程を進めていく
```
mv: composer.phar: No such file or directory
```
うまくインストールできたか確認する
```
composer --version
```
Composer のバージョン番号が表示されたら成功しているはずです。

2. PHP CodeSnifferのインストール

コマンド
```
composer global require "squizlabs/php_codesniffer=*"
```
以下のコマンドを実行してバージョン情報が出れば正常にインストールされています
```
.composer/vendor/bin/phpcs --version
```
PHP CodeSnifferのパスを通す
```
echo 'export PATH=$HOME/.composer/vendor/bin:$PATH' >> ~/.zshrc
```
```
source ~/.zshrc
```
もしくは、
```
open ~/.zshrc
```
コマンドで直接編集
```
export PATH="$HOME/.composer/vendor/bin:$PATH"
```
と入力し保存
```
alias wpcs="phpcs -p -s -v --standard=WordPress"
```
↑必要か不明
```
source ~/.zshrc
```
```
which phpcs
```
コマンドでパスを確認
```
/Users/{ユーザー名}/.composer/vendor/bin/phpcs
```
以下のコマンドを実行してバージョン情報が表示されたら登録完了です
```
phpcs --version
```
3. WordPressコーディング規約のインストール

インストールコマンド
```
composer global require wp-coding-standards/wpcs
```
上記コマンドでエラーが出る場合

Warning from https://repo.packagist.org: You are using an outdated version of Composer. Composer 2 is now available and you should upgrade. See https://getcomposer.org/2

composerをアップデートする。

アップデート
```
composer dump-autoload --version
```
もしくは
```
composer dump-autoload -V
```
でComposerのバージョンを確認できます。

self-update

self-updateを使えば自動で最新のリリースまで上がります
```
composer self-update
```
```
composer dump-autoload -V
```
でバージョンが上がっていれば成功

PHP CodeSnifferにWordPressコーディング規約を設定

コーディング規約がインストールできたら、PHP CodeSnifferで使えるように以下のコマンドで設定をします
```
phpcs --config-set installed_paths ~/.composer/vendor/wp-coding-standards/wpcs
```
以下のコマンドを実行し、「WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core」が含まれていれば設定完了です。
```
phpcs -i
```
4. Atomのパッケージで必要な物

以下の3つは必須。特にlinter-ui-defaultがないとエラー箇所がわからないので注意
- linter
- linter-ui-default
- linter-phpcs
5. 補足

【zsh, bash】macでPATHを通す方法

やること
- ~/.zshrc(あるいは ~/.bash_profile )に任意のPATHを追記
- source で反映させる。
設定ファイルの作成

a. デフォルトシェルを確認

macOS Catalina以降は zsh です。
```
echo $SHELL
```
// デフォルトシェルを表示する
```
/usr/local/bin/zsh
```
// zshの場合

ターミナルの設定ファイルが存在しない場合はシェルに応じた設定ファイルを作成してください。

– bashの場合 .bash_profile
– zshの場合 .zshrc

b. シェルに応じた設定ファイルを作成
```
cd ~
```
// ホームディレクトリに移動する
```
ls -a
```
// カレントディレクトリの情報を表示する

.zshrc または .bash_profile が存在しなければここで表示されません。

それぞれのシェルに応じた設定ファイルを作成しましょう。

設定ファイルの編集

a. 作成した設定ファイルを編集する
```
open ~/.zshrc
```
または
```
open ~/.bash_profile
```
テキストエディタを選択する場合: open

b. 設定ファイルに追記する

インストールしたものによってパスは異なります。
```
export PATH=(パス):$PATH
```
例）
```
export PATH=$HOME/.composer/vendor/bin:$PATH
```
c. 追記した内容を反映する
```
source ~/.bash_profile
```
または
```
source ~/.zshrc
```
引用元：https://docs.google.com/document/d/140oLBlBiZRMrv3LfvGC54UbGgurYmKCiaP-dMMR4JbU/edit#heading=h.kcoiwbc1py81
投稿日：2022年04月06日

ホーム

アーカイブした項目

カテゴリー名取得

ページを開くと、背景が暗くなりテキストを表示

タブメニュー

PHP_CodeSnifferを使ってエラーチェックできるようにする

1.「linter-phpcs」パッケージをインストール

2.phpcsの実行パスを調べる

PHP_CodeSniffer

必要なもの

1. Composerのインストール

2. PHP CodeSnifferのインストール

3. WordPressコーディング規約のインストール

上記コマンドでエラーが出る場合

アップデート

self-update

PHP CodeSnifferにWordPressコーディング規約を設定

4. Atomのパッケージで必要な物

5. 補足

【zsh, bash】macでPATHを通す方法

やること

設定ファイルの作成

a. デフォルトシェルを確認

b. シェルに応じた設定ファイルを作成

設定ファイルの編集

a. 作成した設定ファイルを編集する

b. 設定ファイルに追記する

c. 追記した内容を反映する

アーカイブ