Webデザイン ABC https://webdesign-abc.com Webデザインに関する"?"の解決法を、忘れないようにメモした備忘録 Thu, 15 Dec 2022 05:04:27 +0000 ja hourly 1 83137014 WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する:オリジナルカスタムフィールドの記述方法 https://webdesign-abc.com/howto/wp-meta-tag-box/ https://webdesign-abc.com/howto/wp-meta-tag-box/#respond Thu, 15 Dec 2022 05:04:27 +0000 https://webdesign-abc.com/?p=2713 Webの知識がない方でも簡単にページ作成や修正ができるよう、オリジナルのカスタムフィールドを使って投稿を管理できるようにしたサイトがあるのですが、便利にすればするほど『もっとこうしたい!ああしたい!』がでてきてしまうもん […]

The post WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する:オリジナルカスタムフィールドの記述方法 first appeared on Webデザイン ABC.]]>
Webの知識がない方でも簡単にページ作成や修正ができるよう、オリジナルのカスタムフィールドを使って投稿を管理できるようにしたサイトがあるのですが、便利にすればするほど『もっとこうしたい!ああしたい!』がでてきてしまうもんですよね。

WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する方法:オリジナルカスタムフィールドの記述方法

と言うわけで今回は『WordPressの管理画面で『タグ』のメタボックスを『カテゴリー』のように選択するタグメタボックスを設置し、一括で選択解除するボタンも設置する方法』です。

『タグ』のメタボックスを『カテゴリー』のようにする

流れとしては「デフォルトのタグメタボックスを削除」し、新たにオリジナルのカテゴリーのように「チェックボックスで選択が可能なタグメタボックスを作る」と言う流れになります。

WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する方法:オリジナルカスタムフィールドの記述方法

デフォルトのタグメタボックスを削除する

まずはデフォルトのタグメタボックスを削除します。

//----------デフォルトの Tag MetaBoxを削除
function remove_post_tags_metabox() {
	$id = 'tagsdiv-post_tag'; // このIDはソースコードから確認
	$post_type = 'post'; // 投稿画面からのみ削除
	$position = 'side';
	remove_meta_box( $id, $post_type, $position );
}
add_action( 'admin_menu', 'remove_post_tags_metabox');

ちなみにこのデフォルトで入っているタグのメタボックスを編集してみよう色々と頑張ってみたのですが、残念ながらできませんでした。(もし方法をご存知の方いれば、是非教えてください!)

オリジナルのタグメタボックスを追加する

ちょっと長いですが、こんな感じです。
functions.phpに記述しているので、phpタグを閉じて htmlの記述を入れ込んだりしています。

//----------オリジナルの Tag MetaBoxを追加
function add_new_tags_metabox(){
	$id = 'abc-tagsdiv-post_tag'; // 任意の文字列
	$heading = 'タグ情報'; // メタボックスのヘッダー部に表示される文字
	$callback = 'abc_metabox_content'; // callback function の名前
	$post_type = 'post';
	$position = 'side';
	$pri = 'default'; // プライオリティー 'default' がよいようです
	add_meta_box( $id, $heading, $callback, $post_type, $position, $pri );
}
add_action( 'admin_menu', 'add_new_tags_metabox');
 
/*----- MetaBox内のhtml記述 -----*/
function abc_metabox_content($post) {  
	// すべての記事のタグをオブジェクトの配列として取得
	$all_tags = get_terms( array('taxonomy' => 'post_tag', 'hide_empty' => 0) ); 
	// 投稿に割り当てられたすべてのタグを取得
	$all_tags_of_post = get_the_terms( $post->ID, 'post_tag' );  
	// 投稿タグのIDの配列を作成
	$ids = array();
	if ( $all_tags_of_post ) {
		foreach ($all_tags_of_post as $tag ) {
			$ids[] = $tag->term_id;
		}
	}
?>
<style>.taxonomydiv .tabs-panel{max-height:450px!important;}</style><!--最低限のcssを記述-->
<div class="taxonomydiv">
  <p>タグ一覧</p>
  <div id="taxonomy-post_tag" class="tabs-panel">
    <input type="hidden" name="tax_input[post_tag][]" value="0" />
    <ul>
<?php
      foreach( $all_tags as $tag ){
        // デフォルトではチェックなし
        $checked = "";
        // ループ内のタグのIDが、割り当てられた投稿タグの配列にある場合、チェックボックスをオンにする
        if ( in_array( $tag->term_id, $ids ) ) {
          $checked = " checked='checked'";
        }
        $id = 'post_tag-' . $tag->term_id;
        echo "
        <li id='{$id}'>
          <label><input type='checkbox' name='tax_input[post_tag][]' id='in-$id'". $checked ." value='$tag->slug' /> $tag->name</label><br />
        </li>";
      }    
?>
    </ul>
  </div>
  <p class="clearBtn01"><a id="tag-clear" class="button">タグクリア</a></p><!--タグを全て消すボタン 以下の記述と連動 いらない場合は削除可-->
</div>
<?php
}

全てのタグをクリアするボタンを設置する

このボタンを設置することで、選択されたタグのチェックボックスが全てクリアになります。
この機能がいらない場合はこの記述は不要で、上記50行目の『タグクリア』ボタンも削除してください。

function add_field_clear_button() {
?>
<script>
(function($) {
  // 「タグクリアボタン」がクリックされた時の処理
  $(document).on('click', '#tag-clear', function(e) {
      if (window.confirm("「タグ情報」をクリアしますか?")) {
          // タグを全てクリアする
          var tagClear = document.getElementsByName('tax_input[post_tag][]');
          for (let i = 0; i < tagClear.length; i++) {
              tagClear[i].checked = false;
          }
      }
  });
}(jQuery));
</script>
<?php
}
// 投稿画面、編集画面に挙動を追加
add_action( 'admin_footer-post-new.php', 'add_field_clear_button' );//新規投稿画面にボタン追加
add_action( 'admin_footer-post.php', 'add_field_clear_button' );//投稿編集画面にボタン追加

まとめ

どんな方でも簡単にページ作成や修正ができるようにカスタマイズし、便利にすればするほど『もっとこうしたい!ああしたい!』がでてきてその都度機能を追加し、今ではだいぶ便利に使いやすくなったのですが、アパレルの商品ということで、カラー・種類などのタグ情報がかなりの数になり、管理がしづらい状態になってしまってたんです。

そんな訳で今回、カテゴリーのようなメタボックスにして、選択したチェックも一括でクリアできるようにしたのですが、機能を追加して便利にすればするほど、functions.phpを後からみた時に『これなんやったっけ?』ともなってもしまうので、今回も覚書でした!

The post WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する:オリジナルカスタムフィールドの記述方法 first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/wp-meta-tag-box/feed/ 0 2713
『reCAPTCHA v3』を2ページ以上表示させる時の方法(問い合わせ+α・固定ページ・投稿ページetc..) https://webdesign-abc.com/howto/recaptcha-3/ https://webdesign-abc.com/howto/recaptcha-3/#respond Thu, 01 Dec 2022 16:01:03 +0000 https://webdesign-abc.com/?p=2716 以前『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2を書いた時は、問い合わせページにのみ『reCAPTCHA v3』を設置しました。 ですが、今回「問い合わせページ」とは別に送信機能を使っ […]

The post 『reCAPTCHA v3』を2ページ以上表示させる時の方法(問い合わせ+α・固定ページ・投稿ページetc..) first appeared on Webデザイン ABC.]]>
以前『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2を書いた時は、問い合わせページにのみ『reCAPTCHA v3』を設置しました。

ですが、今回「問い合わせページ」とは別に送信機能を使ったページを「Contact Form 7」を使って作成したのですが、なぜか送信がされなかったんですよね。ですので色々調べてはみたのですがなかなか答えに辿り着けず。。

で、ふと「Contact Form 7」で作った「問い合わせページ」を見てみると『reCAPTCHA v3』がついているのに、新たに作ったページには『reCAPTCHA v3』がついてない!ということに気付き、これが原因かも。と思い『reCAPTCHA v3』を新たなページにも設置してみたところ、無事送信できた!のですが、簡単には設置できなかった。。

『reCAPTCHA v3』を2ページ以上表示させる時の方法(問い合わせ+α・固定ページ・投稿ページetc..)

ということで、今回は『reCAPTCHA v3』を「問い合わせページ」だけではなく、2ページ以上表示させる時の記述方法です。
環境は前回同様、Wordpressで「Contact Form 7」のプラグインを使用での話になります。

『reCAPTCHA v3』を1ページ(問い合わせページ)にのみに表示させる

これは以前書いたものと同じなのですが、functions.phpに以下の記述をします。ちなみに問い合わせページは固定ページで、パーマリンクは「contact」です。

add_action( 'wp_enqueue_scripts', function() {
	if(is_page('contact')) return;
    wp_deregister_script('google-recaptcha');
}, 100, 0);

これで「Contact Form 7」によって追加されるreCAPTCHA関連のコードがすべて読み込まれなくなります。
最後の4行目は優先順位で、デフォルトでは「10」なのですが、このままだと機能しない場合があるの「100」に指定しています。

ちなみに以前(2021/3頃)までは、ここを指定しなくても問題なかったようですね。(詳細は『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2にて)

『reCAPTCHA v3』を2ページ以上に表示させる

固定ページと固定ページの場合

これが今回なかなか辿り着けなかっていた記述です。こちらも functions.phpに記述をします。

add_action( 'wp_enqueue_scripts', function() {
	if(is_page(['contact','new-page'])) return;
    wp_deregister_script('google-recaptcha');
}, 100, 0);

固定ページ・新たなページのパーマリンクは、それぞれ「contact・new-page」としています。

ちなみに最初は上記の2行目を↓このように並列にしていたのですが、

	if(is_page('contact','new-page')) return;

これではうまく表示されず、上記の記述を見つけるのに苦労しちゃった。というわけなんですね。

というわけで、ここでは↓のように[ ]で括って記述してくださいね。

	if(is_page(['contact','new-page'])) return;

固定ページと投稿ページの場合

固定ページと投稿ページの組み合わせの場合は以下になります。

add_action( 'wp_enqueue_scripts', function() {
  if(is_page('contact')) return;
  if(is_single('new-page')) return;
    wp_deregister_script('google-recaptcha');
}, 100, 0);

あとこれは以前も記載しましたが念のため。

『reCAPTCHA』を使っているページには、必ずロゴを表示しなければいけないという決まりがありますので、display:none;等で消しちゃうと規約違反になる のでご注意くださいね。
The post 『reCAPTCHA v3』を2ページ以上表示させる時の方法(問い合わせ+α・固定ページ・投稿ページetc..) first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/recaptcha-3/feed/ 0 2716
PDFファイルのファビコンがWordPressのロゴになる問題の解決方法 https://webdesign-abc.com/trouble/pdf-favicon/ https://webdesign-abc.com/trouble/pdf-favicon/#respond Tue, 25 Oct 2022 05:55:54 +0000 https://webdesign-abc.com/?p=2632 今まで領収書の発行は「電子領収書を作成→レシートフォルダに格納→ダウンロードして使っていただく」という形をとってきたのですが、先ほどその領収書のURLをチェックしてみたところ、ファビコンがWPのロゴになっている!というこ […]

The post PDFファイルのファビコンがWordPressのロゴになる問題の解決方法 first appeared on Webデザイン ABC.]]>
今まで領収書の発行は「電子領収書を作成→レシートフォルダに格納→ダウンロードして使っていただく」という形をとってきたのですが、先ほどその領収書のURLをチェックしてみたところ、ファビコンがWPのロゴになっている!ということに気がついてしまいました。

該当サイトのファビコン設定は勿論きちんと記述しているのですが、なぜかこのPDFファイルだけWPのファビコンになっていたんですよね。。
Web関係の方なら「あ、これWP使ってるサイトなのね」って感じで気にならないでしょうが、何も知らない方がみたら「何このマーク。怪しいサイトかも。。」と思われかねないので、きちんと直すことにしました。

ってことで今回は『PDFファイルのファビコンがWordPressのロゴになる問題の解決方法』です。

PDFファイルのファビコンがWordPressのロゴになる問題の解決方法

原因

原因は『is_favicon 関数』がWordPress 5.4から採用されたようで、それ以降WPのルートフォルダに『favicon.ico』が存在しない場合は、WPのファビコンが表示されるようになったようです。

もう。面倒くさいなぁ。。

解決方法

原因がわかれば解決方法は至って簡単です。
今まで設定(格納)していたファビコンを、WPのルートフォルダにコピペすればOKです!

PDFファイルのファビコンがWordPressのロゴになる問題の解決方法

サーバーによって場所は違うかもしれませんが、XSERVER(エックスサーバー)では、[public_html]の階層がルートフォルダになります。

まとめ

トラブルが起きると丸一日、もしくはそれ以上に時間が潰されてしまうのですが、今回は比較的簡単に解決できました。

でも原因がわからないとなかなか解決できないので、同じようにお困りの方の参考になれば幸いです。

簡単に解決できてよかった。。

The post PDFファイルのファビコンがWordPressのロゴになる問題の解決方法 first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/trouble/pdf-favicon/feed/ 0 2632
WordPressのテスト(ステージング)環境を簡単に作る方法・注意点:XSERVER + All in On WP Migration https://webdesign-abc.com/howto/test-staging-1/ https://webdesign-abc.com/howto/test-staging-1/#respond Tue, 25 Oct 2022 04:42:44 +0000 https://webdesign-abc.com/?p=2623 今まで企業サイトの管理等では、最初から環境が整っているところばかりだったので、開発・テスト・ステージング環境はあまり深く考えず作業していました。 個人的にも外注や委託もされる側だったので、ローカルと本番前(公開前)の環境 […]

The post WordPressのテスト(ステージング)環境を簡単に作る方法・注意点:XSERVER + All in On WP Migration first appeared on Webデザイン ABC.]]>
今まで企業サイトの管理等では、最初から環境が整っているところばかりだったので、開発・テスト・ステージング環境はあまり深く考えず作業していました。

個人的にも外注や委託もされる側だったので、ローカルと本番前(公開前)の環境のみで作業を行ない、これといって困ることはなかったのですが、今回初めてテスト(ステージング)環境で作業をしていただくことが必要な状況となったので、テスト(ステージング)環境を作ることになったのですが、今は簡単・便利にできるようになったんですね。以前はサーバーの引越し(移転)ではphpMyAdminでバックアップをとったり、なんやかんや大変だったのですが、全て必要なく完了できちゃいました。。

ってことで今回は、WordPress(ワードプレス)のテスト(ステージング)環境を簡単に作る方法・注意点です。

XSERVER
WordPress:バージョン 5.9.3
All-in-One WP Migration:バージョン 7.59

2022年5月時点

環境は『XSERVER(エックスサーバー)』×『All in On WP Migration』のプラグインを使った方法となります。

ちなみにテスト(ステージング)環境についてもきちんと把握していなかったので、簡単にこちらもメモ。

データの準備(バックアップ)をする

まずは『All in On WP Migration』を使って、テスト(ステージング)環境へ移行する元のデータを準備(バックアップ)します。(プラグインのインストールは簡単なので省略)

『All in On WP Migration』でエクスポート

『All in On WP Migration』「エクスポート・インポート・バックアップ」の3項目だけとシンプルです。

今回は「エクスポート・インポート」を使います。「エクスポート」の代わりに「バックアップ」でもいいのですが、容量を少しでも抑えたい、無駄なデータは持ち込みたくないので、「エクスポート・インポート」で作業を行います。

All-in-One Migrationのエクスポート1

データが少ないサイトであれば丸々バックアップでも良いと思うのですが、上から2つのチェックボックスは、まず必要ないと思うので外しておきます。

メディアファイルはサイトによってはかなりの容量があることも多々あると思いますので、そういうサイトの場合は3つ目のチェック項目の「メディアライブラリをエクスポートしない」のチェックを外して分割してエクスポートしてくださいね。

ちなみにインポートする際に容量が大きすぎると、ネットワークの環境等により、途中でエラーが起こりインポートし直し。となる場合がありますので、まとめて一つのファイルでエクスポートするのではなく、メディアファイルは分けてエクスポートするのをここではオススメします。

エクスポート先は「ファイル」を選択し、ダウンロードします。

All-in-One Migrationのエクスポート2

エクスポートはこれで完了です!

ちなみにエクスポートのサイズ、今回は318MBだったのですが、実はこのサイズではこのままインポートできない環境があります。

『All in On WP Migration』に関する解説記事を色々見ているとわかるかと思うのですが、『インポートは30MBまでしかできない…』とか『300MB』までとか、いやいや『512MBまでプラグインを追加すればいける!』等の書き込みが多々あります。要はサイトを作った時期や環境によって、インポートの容量が異なっている!んですね。

ですがこのインポートの容量は、簡単に増やすことができます!ので、それは後ほど。

『All in On WP Migration』でインポート

エクスポートができたら、新しく作ったテスト(ステージング)環境に『All in On WP Migration』をインストールし、そのエクスポートしたファイルを丸ごと、分割した場合は分割したファイルを全てインポートします。

ちなみに今回新規で作ったテスト(ステージング)環境は、WPをインストールするところから始めたのですが、その状態に『All in On WP Migration』を入れてみたところ、こんな感じにふつ〜〜〜に1GBまでインストールできるようなってました。

All-in-One Migrationのインポート1GB

このような場合は問題ないのですが、先にも書いたようにサイトを作った時期や環境によってインポート容量はバラバラ『30MB、300MB、512MB、1GB』等々の場合があります。

このサイトがまさにそれで、30MBになっていました。。

All-in-One Migrationのインポート30MB

これじゃー使えませんよね。。こんな場合は以下の方法でインポート容量を変更します。

インポート容量を変更する方法

『XSERVER(エックスサーバー)』のサーバーパネルで、PHPの項目の を開き、

XSERVERのサーバーパネル

該当のドメインを選択して の下の方にある『その他の設定』
[memory_limit]
[post_max_size]
[upload_max_filesize]

の項目を変更します。

XSERVERのサーバーパネルのphp.iniの設定画面

これで30MBだったインポート容量が、1GBまでアップしました!

他にも方法はありますが、色々試してこの方法が一番簡単だったので今回この方法でアップしました。が、他の方法が良い方は「最大アップロードファイルを上げる方法」のリンクがインポート画面にありますので、そこをチェックしてみてくださいね。

あと今回は『XSERVER(エックスサーバー)』でしたが、他のサーバーでもphp.iniの設定画面や、それに代わる設定画面があると思いますので、サーバー側で変更する方はその設定を探してください!

豆知識

いつからかまではわかりませんが、XSERVERの基本プランの容量が増えて、それに伴い、Maxのアップロードのサイズがデフォルトで30MBから1GBにあがったようですね。なので人によって容量がバラバラ(30MB、300MB、512MB、1GB等々)の記事があったというわけですね。

そんな訳で、サーバー側の設定でMaxUpsizeをあげれば、すぐに容量は変更できるので、難しく考えず設定を変更してください!『1GB』あればメディアファイルもそのままいけるくらいなので、これからは何も気にせず引越しできそうですね!

コピーしたサイト全体を検索非対称にする(noindex)

テスト(ステージング)環境を作って安心してしまうと、『コピーしたサイト全体を検索非対称にする』という作業を忘れてしまいがちになるんですが、この作業を怠ると偽装サイトと判断され、ペナルティーを受けてしまう可能性が大いにあるので、この作業は必ず忘れずに行ってくださいね。

WPであれば簡単です。

サイドバーの「設定」→「表示設定」を開き、
「検索エンジンでの表示」→「検索エンジンでの表示」のラジオボタン「検索エンジンがサイトをインデックスしないようにする」にチェックをいれ、変更を保存ボタンを押します。

検索エンジンがサイトをインデックスしないようにする

これでOK!

20221025追記

Jetpackを入れている方の場合は、『セーフモードが有効化されました』との表示がでて、設定するまででかでかと表示され続けます。

Jetpack『セーフモードが有効化されました』

これはありがたいんですけどね、、、
この警告が出てくれたおかげで、この『ステージング環境を検索対象外にする』という行為を思い出させてくれたのですけどね、、、
うざい。。

というわけで、ステージング環境は『検索対象外』にしないといけないものなので、作成したステージング環境をセーフモードにしておきます。

セーブモード状態にすると、右上にこのような表示がされるようになります。

Jetpackセーフモード

というか、今までこの作業した時はこんな警告もでてなかった&こんな表示もでてなかったんですが、、、何が違ってたのでしょうか。。

気になったのでこのステージング環境がインデックスされてないか調べてみたけど、インデックスもされてない。

ステージング環境がインデックスされてないかチェック

う〜ん。なぞ。何をしてたのか思い出せない。。

ちなみにWPでない方は、robots.txtを作成し、

User-Agent:*
Disallow: /

と記述してアップしてください。

ステージング環境がGoogleにインデックスされているかどうかのチェックは、ブラウザの検索窓に

site:https://〇〇〇〇〇〇〇〇

と入力すれば、上記のようにチェックできます。
気になる方はチェックしてみてくださいね。

注意点

『All in On WP Migration』を使って今までエクスポートやバックアップをしたことがある方は、そのデータは何もしなければどんどん溜まっていってしまいます。ですのでエクスポートやバックアップをたくさんすればするほど、そのデータ=容量は必ず増えていくので、注意してください!

実は今回『All in On WP Migration』だけで環境移行をせず、「wp-content」フォルダと、WPのデータベースをダンプした「.sql」ファイルを準備してテスト(ステージング)環境を作ろうと思って用意してたんです。ですがこの「wp-content」フォルダをFTPでダウンロードする際やたらと時間がかかったので、DLした「wp-content」フォルダをチェックしてみたところ、ファイルサイズが約4GBもあった!んですよね。
そして見たことのない「ai1wm-backups」というフォルダを発見した!んです。

これがその「wp-content」フォルダの中なんですが、

wp-contentの中

「ai1wm-backups」を展開してみると、こんな感じになっていて、

ai1wm-backupsとは
容量をチェックしてみると3.53GBもあった!!んですよね。(っていうか、一般情報には「3.62GB」なんですけど、この差は何???)

ai1wm-backupsの容量

『All-in-One WP Migration』を使ったことがある方ならご存知だと思いますが、エクスポートやバックアップをすると、データがダウンロードされますよね?ですので、サーバーにバックアップされるなんて思ってもいなかったのですが、そのバックアップデータが「ai1wm-backups」に保存され容量がやたらと増えていっていた訳なんですね。通りで毎回容量増えるなぁ。と思ったわけです。

ちなみにこれが『All in On WP Migration』の管理画面のバックアップのページなのですが、、、

All-in-One Migrationのバックアップ画面

これを見ればサーバー内に保存されてるのがわかりますね。納得。

ですので、無駄な容量を使わないように「ai1wm-backups」の古いデータは削除して、容量を減らしてからエクスポートなりバックアップした方が良さげですね。

まとめ(開発環境・テスト環境・ステージング環境・本番環境について)

今までは特にこの『開発環境・テスト環境・ステージング環境・本番環境』について考えることなく作業を行なっていたのですが、微妙にニュアンスが違うんですね。

そんな訳で、きちんとわかっておいた方が良いと思ったのでこれもメモ。

・開発環境:ローカルで開発を行う環境のこと
・テスト環境(検証環境):開発環境で作成したものを検証する環境のこと
・ステージング環境:テスト環境でチェックしたものを、本番環境とほぼ同じ環境で検証する環境のこと
・本番環境:最終的にOKになったものをアップ(公開)する環境のこと

この全てをほぼ何も考えずに行なっていたのですが、分けるとこんな感じですね。

今までは「テスト環境」=「ステージング環境」と一緒くたにして作業を行ってきたのですが、確かに分けないとダメですね。
これからはきちんと使い分けて作業を行いたいと思います。

The post WordPressのテスト(ステージング)環境を簡単に作る方法・注意点:XSERVER + All in On WP Migration first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/test-staging-1/feed/ 0 2623
【文字コード変換ツール】:before :afterの擬似要素などでの日本語の文字化け対策:原因・対処(回避)方法 https://webdesign-abc.com/howto/text-garbling/ https://webdesign-abc.com/howto/text-garbling/#respond Mon, 19 Jul 2021 15:43:54 +0000 https://webdesign-abc.com/?p=2589 以前から:before :afterなどの擬似要素で、contentプロパティに日本語を入れて使用していたのですが、『文字化け』にあまり遭遇することがありませんでした。ですので1,2度見ても『たまたまかな?』と思って気に […]

The post 【文字コード変換ツール】:before :afterの擬似要素などでの日本語の文字化け対策:原因・対処(回避)方法 first appeared on Webデザイン ABC.]]>
以前から:before :afterなどの擬似要素で、contentプロパティに日本語を入れて使用していたのですが、『文字化け』にあまり遭遇することがありませんでした。ですので1,2度見ても『たまたまかな?』と思って気に留めてなかったんです。

:before :afterなどの擬似要素で contentプロパティの日本語が文字化けする!原因と対処(回避)方法

ですが最近新たに立ち上げたサイトで:before :afterを多用してテストをしていたところ、結構な頻度で上の画像のような文字化けがでてきたので、これはほっとけないなぁ。
ということで、文字化け対策用『Unicode変換ツール』を作りました。

Unicode変換ツール

このボックスに変換したい日本語を入力し、変換 ボタンを押すと、Unicodeに変換されます。

変換前の日本語(UTF-8)

変換後(Unicode)


この『:before :afterなどの擬似要素で、contentプロパティ内の日本語が文字化けする原因と対処方法』については、以下に記載しています。

擬似要素の文字化けの原因と対処方法

擬似要素の文字化けの原因

原因は

  • cssの文字コードが『Shift_JIS』ではなく『UTF-8』で作られている
  • そのcssが外部ファイルとして定義されている

この状況の時に起こるようです。

文字コード相違に起因する問題は、この先もどうしようもないんでしょうかねぇ。。

ま、そんなことを言ってもしょうがないので、文字化けの対処(回避)方法を。

擬似要素の文字化けの対処(回避)方法

cssに記載した:before :afterなどの擬似要素のcontentの日本語を、そのまま使うのではなく、Unicodeに変換して記載することで回避できます。

:before :afterなどの擬似要素で contentプロパティの日本語が文字化けする!回避方法:contentの中の記載方法

この画像では、アコーディオンの開閉ボタンに使用していたのですが、これを例にとると、

AccordionBox02 label:after {
  content: "カラー・サイズを見る";
}

このcontentプロパティに書いている日本語「カラー・サイズを見る」を、Unicodeに変換して、

AccordionBox02 label:after {
  content: "\30AB\30E9\30FC\30FB\30B5\30A4\30BA\3092\898B\308B";
}

このように記載すれば、文字化けは回避できます。

まとめ

毎回文字化けが起こる訳ではないのですが、確実に『文字化けしない』わけではない!という状況は、やはりあまりよろしくないですよね。

ですので、擬似要素の:beforeや:afterのcontentプロパティで日本語を使用したい場合は、少々面倒ではありますが、変換してから記載して、いらぬ心配をしないで使っちゃってくださいね!

The post 【文字コード変換ツール】:before :afterの擬似要素などでの日本語の文字化け対策:原因・対処(回避)方法 first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/text-garbling/feed/ 0 2589
WPでin_categoryが効かない!サイドバーが出てこない!原因と対処(解決)方法 https://webdesign-abc.com/howto/wp_reset_query/ https://webdesign-abc.com/howto/wp_reset_query/#respond Mon, 19 Jul 2021 08:51:22 +0000 https://webdesign-abc.com/?p=2576 管理しているサイトでカテゴリー単位で色々「in_category」で分岐してサイドバーの出し分けをしていたのですが、あるカテゴリーだけ、どう記述してもサイドバーが表示(分岐)されてくれない!という状況に陥ってしまいました […]

The post WPでin_categoryが効かない!サイドバーが出てこない!原因と対処(解決)方法 first appeared on Webデザイン ABC.]]>
管理しているサイトでカテゴリー単位で色々「in_category」で分岐してサイドバーの出し分けをしていたのですが、あるカテゴリーだけ、どう記述してもサイドバーが表示(分岐)されてくれない!という状況に陥ってしまいました。

WPでin_categoryが効かない!サイドバーが出てこない!原因と解決(対処)方法

記述方法が悪いのかなぁ。とそっち方面をググりまくってたのですが、全然改善せず。順番を変えてみても改善せず。変えたいカテゴリーだけの記述をしても改善せず!?

ここでこのページの記述に問題がある!と、よ〜〜〜やく気づき、解決することができたので、今回はその原因と解決(対処)方法です。

in_categoryが効かない時の原因と対処方法

では早速。

in_categoryが効かなかった原因

サイドバーを出したかったカテゴリーのページは、single.phpを分岐してsingle-A.phpのようにして使っていました。
で、そこのページでは「商品一覧アイテム」を『wp_query』を使ってループして出していました。

結論、『wp_query』がきちんとリセットされてなかったのが原因だったんですが、なかなかここに辿り着けなかったんですよねぇ。。

in_categoryが効かない時の対処方法

原因がわかったらあとは簡単です。『wp_query』をリセットさせる記述、

<?php wp_reset_query();?>

を追加します。

<?php query_posts('cat=1,2&posts_per_page=6&orderby=rand&paged='.$paged); ?><!--カテゴリーID1,2を指定、6ページをランダム表示-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
〜〜〜
<?php endwhile; ?>
<?php else: ?>
〜〜〜
<?php endif; wp_reset_query();?>

こんな感じに、7行目の「endif」のあとに

<?php wp_reset_query();?>

を追加してよ〜〜〜やく解決してくれました。。

ちなみに、

<?php wp_reset_postdata();?>

が入っていたので、リセットされていると思っていたのですが、「wp_reset_postdata」「wp_reset_query」同じリセットでも微妙に違うんですね。

これについてはまた今度余裕があれば書きます。

まとめ

「商品一覧」には、色々なカテゴリーのものが入っていたので、ほぼサイドバーはでなかったのです。

ただ数十回に一回程度表示、サイドバーを出したいものだけがその「商品一覧」を埋めていた時がたまたまあり、このおかげで原因を特定できた訳なのですが、いや〜〜〜長かった。。

代替案で商品一覧を消して数日間対処したりしてたので、結局解決に何週間もかかってしまいました。。ふぅ。。

同じように困ってる方がいたら、ぜひ試してみてください!

The post WPでin_categoryが効かない!サイドバーが出てこない!原因と対処(解決)方法 first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/wp_reset_query/feed/ 0 2576
MacのMAMPがやたら遅い!ブラウジングがやけに遅い時の対処方法色々 https://webdesign-abc.com/howto/mac-mamp-slow/ https://webdesign-abc.com/howto/mac-mamp-slow/#respond Fri, 16 Jul 2021 09:28:10 +0000 https://webdesign-abc.com/?p=2557 今までローカル環境でテストをするのが面倒で、本番環境で公開しないページを作成してカスタマイズのテスト等をしていました。 正確には昔はMAMPをきちんと入れて対応してたのですが、OSバージョンアップ等で挙動がおかしくなると […]

The post MacのMAMPがやたら遅い!ブラウジングがやけに遅い時の対処方法色々 first appeared on Webデザイン ABC.]]>
今までローカル環境でテストをするのが面倒で、本番環境で公開しないページを作成してカスタマイズのテスト等をしていました。
正確には昔はMAMPをきちんと入れて対応してたのですが、OSバージョンアップ等で挙動がおかしくなると、もうそれに時間を割くのが無駄に感じてやらなくなってしまったんですよね。

MANP(ローカル環境)が遅い時の対処方法

ただ、複雑なカスタマイズはやはり更新も多くなり、危険なことも結構してしまっていたので、重い腰を上げてMacにMAMPを入れ直してテスト環境をローカルに作ったのですが、いざ作ってみたらやっっっっったら遅い!これではせっかくテスト環境作ったのに、時間が何倍もかかって作業効率が悪くなってしまっては元も子もない!

ってことで色々と試してみたので、その対処方法を全部書きいておきたいと思います。

MANP(ローカル環境)が遅い時の対処方法

では早速。試した作業です。

メモリ制限の解除

まずはメモリ制限の解除をしてみました。

作業を行ったファイルは、以下の「php.ini」ファイルです。使用しているPHPのバージョンを選択してくださいね。

/Applications/MAMP/bin/php/php7.x.x/conf/php.ini

397行目あたりにあった『memory_limit』(ここでは3行目)を、

; Maximum amount of memory a script may consume (128MB)
; http://php.net/memory-limit
memory_limit = 2048MB

128MB から 2048MBに変更しました。

『-1』なら無制限のようですが、それで他のアプリに影響を与えても問題かな。と思ったので、とりあえず2048MBにしておきました。

これは理論的に変わりそうだな。と思ったのですが、思ったように速くはなってくれませんでした。

OPCacheのキャッシュ間隔を短くする

次も上記同様の「php.ini」ファイルです。

/Applications/MAMP/bin/php/php7.x.x/conf/php.ini

1892行目あたりにあったこの3つの項目を(ここでは6,8,9行目)以下のように変更・追加しました。

[OPcache]
;zend_extension="/Applications/MAMP/bin/php/php7.4.16/lib/php/extensions/no-debug-non-zts-20190902/opcache.so"
  opcache.memory_consumption=128
  opcache.interned_strings_buffer=8
  opcache.max_accelerated_files=4000
  opcache.revalidate_freq=2
  opcache.fast_shutdown=1
  opcache.enable_cli=0
  opcache.enable=0
[xdebug]

変更内容はこんな感じです。

;opcache.revalidate_freq=60 を 2に
;opcache.enable_cli=1 を 0に
;opcache.enable=0 を追加

これも何やら変わりそうだったので期待したのですが、あまり変わらず。。

ローカルホスト名をマップする

今度は、hostsファイルです。

/private/etc/hosts

これは不可視ファイルになっていて普通には開けないので、Finderで「command + shift + .」 や「移動 > フォルダへ移動」、直接ターミナルを使って開けてください。

書き込み権限もないので、権限を変更するなり、デスクトップに持っていって編集して上書きで戻すなり、ターミナルでsudoするなり、適宜方法を選んでください。

で、以下の記述を追加して、ローカルホスト名をマップします。xxxxxは、mampで作ったローカル環境のドメインを入れてください。

127.0.0.1 xxxxx.localhost
::1 xxxxx.localhost
fe80::1%lo0 xxxxx.localhost

これは少し改善がみられました。

最初は一番上の「127.0.0.1」(=ループバックアドレス=「自分」を意味するIPアドレス)だけを追加したのですが、これだけではダメでした。

最後の「IPv6」のアドレスを追加することで、初回は10秒くらいかかるのですが、それ以降は速く処理されるようになりました。

正直この辺はよくわからないので、これでだいぶマシなったのでOKにしようかな。と。

もし他にもいい方法があれば、ぜひ教えてください!

The post MacのMAMPがやたら遅い!ブラウジングがやけに遅い時の対処方法色々 first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/mac-mamp-slow/feed/ 0 2557
共有用FTPアカウントの作り方:XSERVERにて https://webdesign-abc.com/howto/share-account/ https://webdesign-abc.com/howto/share-account/#respond Mon, 28 Jun 2021 14:24:16 +0000 https://webdesign-abc.com/?p=2492 今までサーバーは管理する側、作業も依頼されてする側だったので、これといって気にしたことはなかったのですが、いざこちらから作業の依頼をするとなった時、今まで使っていた全権限があるFTP情報をそのまま教えるわけにはいかないで […]

The post 共有用FTPアカウントの作り方:XSERVERにて first appeared on Webデザイン ABC.]]>
今までサーバーは管理する側、作業も依頼されてする側だったので、これといって気にしたことはなかったのですが、いざこちらから作業の依頼をするとなった時、今まで使っていた全権限があるFTP情報をそのまま教えるわけにはいかないですよね。

作業を依頼する方=信用できる方、というのは前提なのですが、全ディレクトリの全権限のあるFTP情報を渡してしまうと、自分の把握していないところでトラブルが起こり、対応ができない、といった状況に陥ってしまうことも考えられますよね。

そんなわけで今回共有用のFTPアカウントを作ることにしたのですが、初めてなのでわからない。簡単なことではあるのですが、次回また同じ作業をする時、滅多にする作業ではないので忘れてるだろう。ということで覚書です!

共有用のFTPアカウントの作り方

今回はXSERVERで作業したので、XSERVERを例に。

サーバーパネルに入る

まずはサーバーパネル(サーバーの管理画面)に入り『サブFTPアカウント設定』の画面にいきます。

XSERVER『サーバーパネル』の画面

ドメインを選択→サブFTPアカウント設定へ

次にドメインの選択画面になるので、権限を与えるドメインを選択します。
ドメインが選択されると『サブFTPアカウント設定』の画面に移るので、

XSERVER サブFTPアカウント作成の画面1

サブFTPアカウントを作る

『サブFTPアカウント追加』のタブを選択すると、以下の様な画面になるので、必要情報を入力します。

XSERVER サブFTPアカウント作成の画面2

「FTP容量」は、権限を与えて作業をしてもらうだけなので「0」で問題ありませんが、後々このアカウントでもメールのやり取り等する予定がある場合は、適宜容量を追加してください。

ちなみに、パスワードは何も気にせず長いものにしていたのですが、長すぎて怒られました。。

XSERVER サブFTPアカウント作成の画面3

ってことで、パスワードは半角8文字以上15文字以内で設定してください。

サブFTPアカウント設定内容の確認

『サブFTPアカウント設定』が完了すると以下のような画面になるので、

XSERVER サブFTPアカウント作成の画面4

上記枠内の3つの情報を、共有したい方へ渡してください。
これで全ディレクトリの全権限を渡さず、安心して作業してもらえますね。

ちなみに、phpMyAdminのユーザー作成方法も必要なので、また追記したいと思います。

とりあえず今回は以上です!

The post 共有用FTPアカウントの作り方:XSERVERにて first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/share-account/feed/ 0 2492
ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す https://webdesign-abc.com/howto/wp-pagenavi_404-error/ https://webdesign-abc.com/howto/wp-pagenavi_404-error/#respond Wed, 23 Jun 2021 04:49:23 +0000 https://webdesign-abc.com/?p=2479 今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回のカスタマイズでは次のページに行かない。。2ページ目を延々ループして抜け出せない。。とのことで色々調 […]

The post ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す first appeared on Webデザイン ABC.]]>
今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回のカスタマイズでは次のページに行かない。。2ページ目を延々ループして抜け出せない。。とのことで色々調べてると『WP-Pagenavi』が原因、ということに辿り着い、延々ループからは抜け出せたのですが、今度は404エラーに。。

とりあえずこの404の原因もわかったのですが、今度同じような症状が出た時、ここに辿り着くのにまた膨大な時間を失うわけにはいかない!ので覚書!

ページネーションがおかしい!次のページに行かない!404エラーになる!

そんなわけで、今回は『WP-Pagenavi』で次のページに行かない時の対処法(解決方法)です。

延々ループからの脱出方法

まずは延々ループからの脱出方法です。記述を少し変更(付足)します。

例えばカテゴリーIDが1と2のカテゴリー10ページ表示する記述を以下のように書いていたとします。
(カテゴリーIDは判別できているのを前提に進めます。)

<?php query_posts('cat=1,2&posts_per_page=10'); ?>

これの最後に、

paged=’.$paged 

をつけて、

<?php query_posts('cat=1,2&posts_per_page=10&paged=’.$paged ); ?>

とすると、延々ループから脱出し、2ページ目以降も表示されるように!なってくれました。

これだけでいいの?って感じですけど、ここに辿り着くまでだい〜〜〜ぶ時間がかかってしまいました。ふぅ。。

カテゴリーを指定する記述

ちなみに、
カテゴリーを指定する場合は『cat=2』のようにカテゴリーIDを指定しますが、
カテゴリーを除外する場合は『cat=-2』のようにすればOKです。

複数指定する場合は、例えば2のカテゴリーを除外し、3,4のカテゴリーを指定する場合は『cat=-2,3,4』となり、記述は

<?php query_posts('cat=-2,3,4&paged='.$paged); ?>

となります。

表示順序を指定する記述

ランダムに表示させる場合は『orderby=rand』を記述します。

<?php query_posts('orderby=rand&paged='.$paged); ?>

昇順に表示させる場合は『orderby=ASC』
降順に表示させる場合は『orderby=DESC』

表示数を指定する記述

ページ数を12に指定する場合は『posts_per_page=12』なので、

<?php query_posts('posts_per_page=12&paged='.$paged); ?>

となります。
これは後で書きますが、管理画面できちんと指定すれば特にいらないかも。

カテゴリー・表示順序・表示数を全て指定する記述

カテゴリー・表示順序・表示数、これら全てを同時に指定すると、

<?php query_posts('cat=-2,3,4&orderby=rand&posts_per_page=12&paged='.$paged); ?>

となります。

404エラーの解決方法

ページ数の設定は、実は『WordPress』の管理画面と『WP-Pagenavi』の管理画面の両方にあるんですね。

ページネーションがおかしい!設定箇所が2箇所

さらに上記のようにPHPの記述も加えると、3つでページ数を指定することができてしまいます。

そんな訳で、ここに差異があると404エラーに陥ってしまいます。
ま、普通に考えればわかることなのですが、もうハマってしまいました。数時間以上。。はぁ。。

エラーになる例

色々試してみると、
WPの表示設定 > WP-Pagenaviの表示設定
このような数値になっているとエラーが起きるようですね。

投稿記事が20あるとして、WPの表示設定が10、WP-Pagenaviが2の場合、
WPでは10ページを1ページとして出力しているので、2ページ分しかないのに、
WP-Pagenaviでは2ページを1ページとして出力しているので、10ページ分出力させようとするため、
3ページ目以降はWP-Pagenaviでは表示させたいけど、WPではそんなに記事はない!と判断するので、404エラーが起きる、というわけなんですね。

文字にするとわかりにくい。。でもそういうことなんですね。納得。

そんなわけで、表示数の設定の差異をチェックして、差異がある場合は統一してください。これで404エラーは解消するはずです。

おまけ:表示数を0にすると…

試しに表示数を0にしてみたところ…

ページネーションがおかしい!表示数を0にすると…

こんな感じにわけのわからない表示になってしまいました。。参考まで。

トラブル・エラー回避・解決方法

そんなわけで、トラブル・エラー回避・解決方法としては、

延々ループの場合は、

  • 『paged=’.$paged』を記述に付け足す

404エラーで3ページ目以降が表示されない場合は、

  • 『WP』と『WP-Pagenavi』の表示設定を同じにする。(PHPで記述はしない)
  • 『WP』と『WP-Pagenavi』の表示設定を1にして、PHPの記述で管理する。

この2通りなのかな。と思います。
こちらに関しては面倒臭いですけど『WP・WP-Pagenavi』ともに表示設定をきちんとすれば、問題は起きないのかな。ってとこですね。

同じように『次のページに行きたいのに、延々2ページ目のループになって次のページに行かない!』という方や、『404エラーで3ページ目以降が表示されない!!』という方は、これを試してみてください!

The post ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/wp-pagenavi_404-error/feed/ 0 2479
OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて https://webdesign-abc.com/howto/get_app_id/ https://webdesign-abc.com/howto/get_app_id/#respond Tue, 06 Apr 2021 05:30:36 +0000 https://webdesign-abc.com/?p=2455 以前書いていたOGPの設定方法の情報が古くなっていたので、【2021版】として『【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!』を新たに書いたのですが、『アプリID( […]

The post OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて first appeared on Webデザイン ABC.]]>
以前書いていたOGPの設定方法の情報が古くなっていたので、【2021版】として『【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!』を新たに書いたのですが、『アプリID(app_id)』の情報が必要となってきます。

app_id確認方法2

この『アプリID(app_id)』の情報は、『FACEBOOK for Developers』の「アプリダッシュボード」にあるのですが、この画面も新しくなっていたので、アプリを作成方法も含め追記したいと思います。

OGP設定で必要な『アプリID(app_id)』の確認方法

では早速。

1. 『FACEBOOK for Developers』の「アプリダッシュボード」の画面へ行きます

すると以下のような画面でアプリを選択する画面になるので、

app_id確認方法1

2. 『アプリID(app_id)』が必要なアプリを選択します

『アプリID(app_id)』が必要なアプリを選択をするとこのような画面になり、「アプリID」にマウスホーバーするとIDがクリックでコピーできるようになるので、

app_id確認方法2

3. クリックして『アプリID(app_id)』を取得(コピー)します

あとはこの『アプリID(app_id)』を、『【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!』にて作成したOGP.phpの38行目(以下の画像参照)に、

app_idをペーストする場所

ペーストすればOKです!

アプリの作成方法

『FACEBOOK for Developers』にてまだアプリを作成していない新規サイトなどでは、OGPで必要な『アプリID(app_id)』の情報がありません。ですので、アプリの作成方法も簡単に書いておきます。

1. アプリを作成ボタンをクリックする

まずは『FACEBOOK for Developers』ののアプリの画面へ行き、以下のアプリを作成ボタンをクリックします。

「アプリを作成」のボタン

2. アプリを作成します

あとは適宜必要情報を選択、入力し、

アプリ作成画面

アプリを作成ボタンをクリックすればOKです!

The post OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて first appeared on Webデザイン ABC.]]>
https://webdesign-abc.com/howto/get_app_id/feed/ 0 2455