大量のデータをアップロードしたり削除したり、編集していると「エラーが発生しました。ディスクへのファイル書き込みに失敗しました」と表示されて、画像のアップロードやインポートやら、ことごとくエラーで触れず…。
今回はこのエラーで、調べたり解決したことを備忘録として紹介します。

焦って色々と情報収集したものの、はっきりこれ！というのがなくて、迷いまくりました…

/var/tmpの削除

先に解決した方法から案内すると、タイトル通りの「/var/tmp」の削除を行いました。

※tmp(テンポラリ)ファイル＝一時的なファイル

FTPソフト（FileZillaやFFFTPなど）で、フォルダ入力欄に/var/tmpを入力して開いた場所にある、TMPファイルを削除したところ、無事にエラーなくアップロードなどの作業ができるようになりました。

大量のデータを取り扱う場合はご注意を

今回の場合は、1000記事以上のブログの記事＋画像の一括インポートしたり、エクスポートしたりを短時間でごそごそと触ってる最中に起きたお話なんですが、同じようなエラーが出た時、一度チェックしてみてください。

お借りしていたさくらインターネットさまのサポートに聞いて教えていただいたので、他だとまた違うかもしれませんが、参考になれば幸いです！

The post WordPressで「エラーが発生しました。 ディスクへのファイルの書き込みに失敗しました。」と表示された時のチェックポイント appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

お客様から今使っているテーマで「最新の投稿の一覧URLを出したい」と相談を受けて対応してきました。
今回、最新の投稿のアーカイブページを好きなURLで設置する方法を備忘録としてご紹介していきます。

ブログサイトはトップが一覧になるので、企業サイトで使うことがあるかな～？程度ですが、参考にどうぞ！

テーマの更新にご注意

自作のテーマや更新が少ない場合はまだ大丈夫ですが、通常の更新があるテーマを使う場合、更新をするとfunction.phpに書いた設定が上書きされて消えてしまうことがあります。

更新の時に「あ！」とならないように、その点だけご注意ください。

The post WordPressの「最新の投稿」の一覧（アーカイブ）を好きなURLで表示させる方法 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

サイトの内容によって、細かくは変わってくるので参考程度にしてくださいね（2020年9月からGoogleは、検索評価を「モバイル」に統一するので、モバイルの速度改善オススメです！）

改善前の状態

Googleが提供するサイトURLを入れると、サイトスピードを計測する「PageSpeed Insights」
改善前の状態で測定した結果　モバイル3点、パソコン47点

では、この状態からWordpress高速化に向けて、やった内容やポイントをご紹介していきます。

画像処理

サイトスピード測定した時に「改善できる項目」として上げられている
「次世代フォーマットでの画像配信」「オフスクリーンの画像遅延読み込み」「効率的な画像フォーマット」「適切な画像サイズ」
この4つが画像処理に関連する項目で、点数に占める割合が大きくなっています。

キャッシュとコードの管理

上記と同じく「改善できる項目」として上げられている
「テキスト圧縮の有効化」「レンダリングを妨げるリソースの除外」
この2点については、画像処理より少し専門的な内容になります。

サーバー、プラグイン、テーマ、その他

ここは「改善できる項目」の「サーバー応答時間の短縮」の内容になりますが、ここはサイトによって大きく変わってくる部分になります。

改善後の状態

改善後に測定した結果　モバイル88点、パソコン99点

モバイルが6秒から2秒に改善！これにサーバーの載せ替え、プラグインの絞り込みや、テーマ改善をすればもっと伸ばせる余地もある結果に◎

WordPress高速化は、調べたり時間をかければ自分でもすることができると思いますが、あちこち触って改善をしていく内容なので自力では少しハードルが高めです。
チャレンジしてみて厳しいな…と思ったら、ぜひ一度ご相談してくださいね。

The post 【2020年】WordPressサイトをスピードアップ！モバイルを6秒から2秒にした高速化のポイント appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

お客様の希望を入力してもらって送信するような使い方をする場合に、カラーピッカーを使った色選択をして送信する方法をご紹介します。

「Color Picker for Contact Form 7」プラグインを使う方法

ContactForm7自体に、カラー選択できる機能はありませんが、プラグインを使うことで解決できます。

使い方はカンタン！
プラグインを有効化してから、ContactForm7のフォームを見ると「color」が選べるようになっているので、テキストやテキストエリアのように表示させたいところにポチッと入れるだけ。

これで、お客様はカラーピッカーで色を選択でき、受け取り側はカラーコードで内容を受け取れるようになります。

「jscolor.js」をContact Form7で使う

あまりプラグインを増やしたくない方は、こちらのjscolor.jsを使う方法がおすすめです。
こちらでは実装していないので、紹介だけになりますが、こちらの記事を参考にしてみてください。
Integrating color picker to contact form 7 plugin（英文）

オーダーメイド型の商品の申し込みフォームとかに、便利なのでぜひ使ってみてくださいね！

The post Contact Form 7でカラーコードを選択して送信する方法【Contact Form 7カスタマイズ】 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

既存のWordpressに、プラグインではなくPHPで組んでみました！

全体の仕様

STEP1
プランごとの単価と、入力した人数をかけ算して、プラン合計に出力する
※人数は4人以上じゃなければ申し込み不可

STEP2
オプションごとに単価×数量＝金額をだして、オプション合計に合計金額を出力する

STEP3
STEP1とSTEP2の内容をそのまま申し込みするためのフォーム。
フォーム自体は「PHP工房様のMailForm01」と、Googleカレンダーを使用しています。

細かく全部書くと、とっても長くなるので、ある程度の知識があることを前提に書いています（すみません…！）

下準備

今回は、専用の固定ページに設置したい、編集もそのphpファイルで編集していけるように
・「page-○○.php」を作ってアップロード（それに合わせた固定ページも作る）
・「PHP工房様のMailForm01」をダウンロードして、設定項目を編集してFTPから「wp-content/themes/テーマフォルダ/keisan（好きなフォルダを作成）」して、ファイルをアップロードしておく

STEP1

<script>
document.addEventListener('change',function(e){
var t=e.target;
if(t.nodeName=="INPUT" ||t.nodeName=="SELECT"){
var num=1;
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].name=="people_plan_total") continue;
if((f[i].type=="number" ||f[i].type=="radio") && f[i].checked ||f[i].type=="number") num*=parseInt(f[i].value);
}
f.elements["people_plan_total"].value=num;
}
});
</script>

<input type="radio" name="plan" value="金額" checked>プラン1
<input type="radio" name="plan" value="金額">プラン2
<input type="radio" name="plan" value="金額">プラン3
人数　<input type="number" name="people" value="0" step="1" min="4" max="500" placeholder="人数" pattern="\d*">
合計　<input type="text" name="people_plan_total" value="0" readonly> 円

名前などはわかりやすいものに変更してください。

STEP2

<script type="text/javascript">
<!--
function keisan(){
	// 設定開始
	// 商品1
	var list1 = document.form1.option1.selectedIndex * 10000; // 単価を設定
	document.form1.option1_price.value = list1; // 小計を表示
	// 商品2
	var list2 = document.form1.option2.selectedIndex * 5000; // 単価を設定
	document.form1.option2_price.value = list2; // 小計を表示
	// 合計を計算
	var total = list1 + list2;
	// 設定終了
	document.form1.option_total.value = total; // 合計を表示
}
</script> 

<select name="option1" onChange="keisan()">
<option value="オプション名前　数量：0">0</option>
<option value="オプション名前　数量：1">1</option>
<option value="オプション名前　数量：2">2</option>
<option value="オプション名前　数量：3">3</option>
<option value="オプション名前　数量：4">4</option>
<option value="オプション名前　数量：5">5</option>
</select>
<select name="option2" onChange="keisan()">
<option value="オプション名前　数量：0">0</option>
<option value="オプション名前　数量：1">1</option>
<option value="オプション名前　数量：2">2</option>
<option value="オプション名前　数量：3">3</option>
<option value="オプション名前　数量：4">4</option>
<option value="オプション名前　数量：5">5</option>
</select>
オプション合計　<input type="text" name="option_total" size="8" value="0"> 円

増やしたいオプションの分だけ、listとoptionを増やしてください。

STEP3

このメールフォームの部分は、先にダウンロードしたMailForm01の設定とあわせて、項目を作ります。

<form method="post" action="<?php echo get_template_directory_uri(); ?>/keisan/mail.php" name="form1">
STEP1、STEP2のHTMLと、STEP3のフォームを記載する
</form>

見積もりだけのプラグイン、注文/申し込みのプラグインそれぞれはあっても、見積もりしてそのまま注文/申し込みできるプラグインがなく（あるにはあったものの、条件が合わず）今回はがっつりと組んで実装してみました。
実際のページは 勝っちゃんの手ぶらでBBQ 様のサイトでご確認ください。

久しぶりにプログラムで頭うんうん捻らせました…！同じことで悩まれてた方はどうぞ参考にしてください。

The post 自動見積もりと、その内容で申し込みできるフォームを作る手順【事例あり】 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

別で運用してた記事や画像が300件以上…。これWordpressに手入力しないといけないのかな…う～ん…

手入力してたら、いくら時間あっても足りなくなっちゃうね。CSVとプラグインを使って、まとめて登録していきましょ！

今回は別のCMSで運用していたデータ、これから新規で一気に記事を入れたい場合など、これから記事や画像を登録していきたい向けの内容になります。

メモ

使用するプラグイン「Really Simple CSV Importer」は、カスタム投稿・カスタムフィールド（Advanced Custom Fields）もサポートしているのでとても便利ですが、最終更新: 5年前と古いためプラグインに不安があるなら、データ登録が終わったら停止または削除してください。

1下準備

今回データ移行に使う「Really Simple CSV Importer」を、管理画面のプラグインから有効化しておきましょう。 管理画面の「ツール」→「インポート」に進み、CSVインポーターの実行から「サンプルCSVファイルをダウンロード: csv」をダウンロードします。 ※投稿にカスタム投稿やカスタムフィールドなどを使用する場合、Wordpressに設定しておきましょう。

2CSVファイルを編集しよう

CSVファイルの編集は、ExcelまたはCassava Editor（フリーソフト）がオススメです。 サンプルCSVファイルを開いて、1行目にかかれたタグはカスタムフィールドがある場合、編集が必要になります。

1行目のタグについて

サンプルCSVの1行目タグを見てみましょう。

post_id	新しい記事の場合は空白またはなし、すでに登録した記事を編集する場合は記事のIDを入れます。
post_name	投稿のスラッグ、空白またはなしでもOK
post_author	投稿するユーザーのIDを指定
post_date	記事の日付を指定できます。　入力例：2020/02/07 0:00:00
post_type	投稿の種類を指定します。 投稿「post」、固定ページ「page」、カスタム投稿「カスタム投稿タイプ名」
post_status	公開や下書きなどの投稿ステータスの指定。公開の場合は「publish」
post_title	記事のタイトル
post_content	記事の内容。HTML可、画像を表示させる場合はimgタグを使用します。
post_category	投稿(post)カテゴリーのスラッグを指定。複数の場合はカンマ区切り　入力例：family,event,diary
post_tags	投稿(post)タグのスラッグで指定。複数の場合はカンマ区切り　入力例：tag1,tag2,tag3
custom_field	カスタムフィールドを設置している場合、1行目の「custom_field」をカスタムフィールド名に編集します

post_typeは必須項目です。

サンプルCSVの1行目に記載されていないものの、よく使うタグ

post_thumbnail	アイキャッチ画像のURLを指定
tax_{taxonomy}	カスタムタクソノミー（カスタム投稿タイプのカテゴリやタグなど）を指定。 例えばproduct_categoryというタクソノミーを設定した場合は「tax_product_category」と編集します。

その他にも使用できるタグがありますが、よく使いそうなものだけピックアップしました。 ※その他のタグは制作者様のサイト説明文をチェックしてみてください。

すべての項目を記載する必要はないので、必要なものだけ1行目に設定して利用します。

▼サンプル カスタム投稿productに記事を登録したい 記事タイトル、記事コンテンツ、カスタム投稿product、タクソノミーproduct_category、カスタムフィールドproduct_price、アイキャッチ画像を盛り込んだ場合

CSVデータは必ず「UTF-8」で保存する

CSVの編集が終わって、保存をする時には必ず文字コードを「UTF-8」で保存をします。 UTF-8で保存しない場合、インポートする際に「データベースに投稿を追加できませんでした。WP_Postオブジェクトがセットされていません。」とエラーが出て登録ができません。

3CSVデータをアップロードしよう

管理画面の「ツール」→「インポート」に進み、CSVインポーターの実行から編集したCSVファイルを選択して「ファイルをアップロードしてインポート」を行います。

手動で入力するよりは時間かからないものの、CSVファイルの編集が一番時間かかりますね。お疲れさまでした！

カスタムフィールドの画像

「Really Simple CSV Importer Media Plus」という派生プラグインを使うと、画像をカスタムフィールドに配置し、画像IDで表示ができるようになります。 ※Download ZIPでダウンロードしたものを、プラグインアップロードで有効化

<?php $image = wp_get_attachment_image_src(get_field('フィールド名'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('フィールド名')) ?>" />

こちらのプラグインもぜひ活用してみてください。

その他：エラーメッセージ post_id

アップロードをすると「CSVファイルからの投稿タイプ値は、データベース内の既存のデータと一致しません。post_id: ＊＊＊、post_type(csv): ihin-sorting、post_type(db): attachment」とエラーが出た場合は、post_idとアイキャッチ画像に当てられたidが被っている（細かく書くと違うけれど）ので、post_idを違うものに変更してアップロードまたは空白にしてアップロードしてみてください。

※エラーが出る条件は、post_id（事前にpost_idを指定して新規アップロードしたい）とアイキャッチ画像が設定されたCSVをアップロードする時

その他：エラーメッセージ タイムアウト

「Fatal error: Maximum execution time of 0 seconds exceeded in ＊＊＊＊/wp-includes/class-wp-image-editor-imagick.php on line 362」 max_execution_timeは処理のタイムアウトなので、php.iniの設定を確認してみてください。0になっていれば無制限ですが、max_input_timeの値でタイムアウトしている場合があるので、こちらもチェックしてみてください。 php.iniで編集ができない場合は、.htaccessで編集がおすすめです。

<IfModule mod_php7.c>
  php_value post_max_size "32M"
  php_value upload_max_filesize "24M"

  php_value memory_limit "128M"

  php_value max_execution_time "120"
  php_value max_input_time "120"
</IfModule>

設置するサイトの環境に合わせて編集をしてください。 今回はよく使いそうな部分をコンパクトに説明した形なので、もっと深く使いたい場合は、ぜひ制作者様のサイト説明文を見てください。

その他：運用面でのポイント

post_idの部分を「空でアップロードすれば新規登録」「post_idを入れれば更新」といった感じですが、最初に空でアップロードした後に、1記事づつpost_idを確認してCSVに入力が面倒…
という時には、最初の新規登録の段階で、post_idを自分の都合のいいID番号を入れてアップロードでも利用できます。
（ただし、WordPressの仕様上、管理画面から何か投稿や固定ページを作成すると自動的にpost_idが付与されるので、それと被らないようにだけ注意）

The post 記事をCSVでまとめて登録「Really Simple CSV Importer」を使ってみよう！ appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

ホントだ！調べてみたらWordpress5.3のバージョンアップで画像に関する変更があったみたい

今回はアップロードしてみて初めて気がつくことが多そうな、Wordpress5.3で大きな画像をアップロードする方法や注意点をご紹介します。

変更Point

・一辺が2560px以上の画像をアップロードすると、自動でリサイズされる
・リサイズした画像には、拡張子の前に「-scaled」が自動でつきます

写真が中心のサイトなど、高画質画像を使いたいときには気になるので、この大きさ制限を解除する方法をいくつかご紹介します。

1function.phpで制限解除する方法

//5.3からの強制リサイズの解除
add_filter( 'big_image_size_threshold', '__return_false' );

このコードをお使いのテーマのfunction.phpへ記入する
（プラグインを増やしたくない、テーマ編集ができる方向け）

2プラグインを使う

いくつかプラグインがあります。

1．プラグイン「Disable “BIG image” Threshold」をインストールして有効化するだけ
2．プラグイン「Imsanity」をインストールして有効化して設定をする

カンタンさで選ぶか、他の画像サイズも調整するか、お好みです。

3サーバーに直接アップロードする

FTPで接続して「wp-content」→「uploads」に画像をアップロードして、そのURLを貼り付ける。

管理画面の「メディア」に表示されない、FTP接続や管理がちょっと面倒なので、一応こういう方法もできるという程度…。

今後のWordpressバージョンアップでまた変更があるかもしれませんが、ひとまず大きな画像を使いたい時の方法でした。
設定のメディア辺りにこの機能を使う使わないとか項目出てくれたらいいな…（ひっそりと要望）

The post WordPressで大きな画像を使いたい！自動で2560pxになるのを解除する3つの方法 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

わかる。フォームの入力する箇所が増えると、途中で離脱しちゃう率も上がるし、お互い手間は省きたいよね。

今回は、Contact Form 7のカスタマイズ「郵便番号を入力すると住所が自動的に入力される方法」をご紹介します。

1zipaddr-jpプラグインをインストールする

管理画面の「プラグイン」から「新規追加」
検索でzipaddr-jpと入力して、プラグインをインストール・有効化します。

2Contact Form 7で設定をする

zipaddr-jpプラグインは初期設定のままでOKなので、Contact Form 7をカスタマイズしていきます。

表示させたいところで「テキスト」を選択し、ID属性を入力する

【サンプル】細かく分けないならこれでOK

郵便番号　[text* zip id:zip watermark"例：000-000"]
住所　[text* addr id:addr watermark"例：●●市●●町●●111番地"]

3自動返信メールに表示されるようにする

自動返信メールを設定する場合は「メール」タブから、メール(2)にチェックを入れて以下のタグで設定します。

【サンプル：自動返信】

郵便番号：[zip]
ご住所：[addr]

自動返信メールがあると、相手の方にも記録が残るので安心◎すぐにできるので、ぜひお試しください。

The post Contact Form 7で郵便番号から住所を自動入力できる方法【Contact Form 7カスタマイズ】 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

ワードプレスはメリットたくさん、自由なサイトが作れる便利なもの

最初からホームページのようなページを作る機能、ブログの機能、すべて入っているので、見せ方が自由です。
ブログがいらなければブログの機能は見せない（使わない）
ホームページのようなページがいらなければ、ブログだけ見せる。
どっちも使った一体型のようなホームページだって作ることができちゃいます。

一昔前に作られるHPは、1ページごとに作るということで、知識がないと作れないシロモノでした。

WordPress（ワードプレス）の5つの特徴

で、それと比べてWordpress（ワードプレス）は

更新を依頼せず済むので、コストがかからない・スピードが速い・修正やテストがしやすいと、お仕事で使うことを考えると、Wordpressのメリットはとても大きいです。

ワードプレスを使うには？

まずはワードプレスが利用可能なレンタルサーバー（ネット上のデータ倉庫）を借ります。
ほとんどのレンタルサーバーでは、Wordpress（ワードプレス）自動インストールの機能がついているので、必要事項を入力するだけで、初期状態のワードプレスサイトが表示されます。

初期状態のワードプレスでも、サイトに訪れるお客様からすると、すでにホームページ（ブログ）としてはネット上に存在しています。
ですが、そこから売上や反応を上げるには伝わりやすい見た目に整えたり、お客様の知りたいことを充実させていくことが重要です。

ワードプレスは敷居が高い、使っているけど活用しきれていない、わかりやすく伝わるよう整えたい、機能を充実させたいなど、難しいところだけのご相談もママチュデザインでは可能です。

WordPress（ワードプレス）が気になっていた方は、この機会にぜひ試してみてくださいね。

The post 3分でサクッと！WordPress（ワードプレス）のメリットがわかるお話 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

そんな時にやっておきたい年号の自動更新する書き方をご紹介します。

コピーライトの年号を書き換える

一般的にはコピーライトはfooter.phpの一番下に書かれていることが多いと思います。
書き換えたい場所に

<?php echo date('Y');?>

を書くだけ。
このサイトの場合は

&copy; <?php echo date('Y');?> ママチュデザイン

で、表示させています。

おまけ。コピーライトの書き方

昔よく見かけた表記は「Copyright © 年号 ◯◯◯ Corporation. All Rights Reserved.」と、こちらが多かったですが、調べてみると今は正しい書き方として簡略化したものが増えています。

この3つが書かれていれば、どの順での表記OKということで、スッキリとわかりやすいものに。

本当は書かなくても問題ないコピーライト

厳密に言うと、日本ではベルヌ条約に加盟しているので、コピーライトを書かなくても「著作物を発行した時点で、自動的に著作者に著作権が与えられる」ことになっています。

The post 地味に見られてる！？コピーライトの年号を自動更新する方法 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.