【XAMPP】Apacheが起動しなくなった 時の対処法
本記事では、当方環境でApacheが起動しなくなった際に行った原因調査と対処法についてシェアさせていただきます。
【XAMPP】Apacheが起動しなくなった時の原因・対処法
では、まず、今回の調査範囲の洗い出しからです。
1) 調査範囲
今回、調査したファイルは以下の通り
関連ファイル
パス |
ファイル名 |
|---|---|
| C:\Windows\System32\drivers\etc | hosts |
| C:\xampp\apache\conf | httpd.conf |
| C:\xampp\apache\conf\extra | httpd-vhosts.conf |
2) 原因
httpd.conf 内の記述に不適切な箇所があった。
結論として、
XAMPPで複数サイトのバーチャルホスト設定をするため、
以下のコメントアウトを外していました。
それが今回の問題原因だったようです。
# Virtual hosts Include conf/extra/httpd-vhosts.conf
3) エラー原因発見までの経緯
1. Apacheが起動しなくなった
XAMPPでApacheが起動を停止してしまうようになりました。
2. XAMPP コントロールパネルでのエラーメッセージ
XAMPPのコントロールパネルでは、以下エラーメッセージが確認されました。《エラーメッセージ》
17:56:56 [Apache] Status change detected: stopped
17:56:56 [Apache] Error: Apache shutdown unexpectedly.
17:56:56 [Apache] This may be due to a blocked port, missing dependencies,
17:56:56 [Apache] improper privileges, a crash, or a shutdown by another method.
17:56:56 [Apache] Press the Logs button to view error logs and check
17:56:56 [Apache] the Windows Event Viewer for more clues
17:56:56 [Apache] If you need more help, copy and post this
17:56:56 [Apache] entire log window on the forums
3. XAMPP で Apacheエラーログを確認
エラーログには、以下のような記録が…
Warning: DocumentRoot [C:/xampp/htdocs/(ファイル名)] does not exist
確認したら、現在このパス + ファイルは存在しなくなっていたので、hostsファイル、httpd.confファイルにあった該当箇所を削除、上書き更新しました。
が、問題は解消せず。
これは要因ではなかったよう。
4. エラー発生前の記述に戻す(httpd.conf)
今回の複数の修正箇所をたどり、一つ一つ、エラー発生前の記述に戻していきながら動作確認
↓
発見、
原因はここでした。
《修正前》
コメントアウトなし
# Virtual hosts Include conf/extra/httpd-vhosts.conf
《修正後》
再度コメントアウトし、ファイルを更新、
# Virtual hosts #Include conf/extra/httpd-vhosts.conf
ん～、でもなんでだろう？
パスは間違ってないと思うんだけど。。。
ともかく、
上記修正後ファイルでXAMPPを再起動したところ、
Apacheが無事起動するようになりました。
4) 今回の反省点
複数の修正をまとめて行ってしまっていたため、
問題の切り分け、原因特定に多少時間を要してしまいました。
作業にあたり、
- 変更作業の記録
- 変更前ファイルのバックアップ
は抜かりなく、
が作業上の基本、かつ、重要ポイントですね。
XSERVERを契約・お名前.comでドメイン取得・設定する手順について
XSERVERで契約したサーバーにお名前.comで取得したドメインを設定するには
高速・高機能で定評あるXSERVER を新たに契約しました。
以下、備忘録まで。
手続きの流れ
レンタルサーバー契約・ドメイン取得
1.1. XSERVERで契約
【手順】
(1) 「お申し込み」-「お申し込みフォーム」をクリック
(2)「サーバー新規申し込み」ボタンをクリック
(3) 利用規約確認、同意
(4) 「新規サーバーのお申し込み」をクリック
(5) サーバーIDを設定・申し込み
(6) お申込みフォーム入力
(9) 「お申し込み内容の確認」ボタンをクリック
(10) 「お申込みをする」ボタンをクリック
(11) 以下件名のメールを受信
「【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間] (サーバーID)」
1.2. お名前.comでドメインを取得
2. レンタルサーバー契約後、ドメイン取得後の手続き
2.1. XSERVERで新ドメインの追加設定
【手順】
《XServer 側》
(1)サーバーパネルにログイン
ドメイン情報を入力し「ドメインの追加」をクリック
⇒ XSERVERにドメインが追加されます。
(3)「サーバー情報」をクリック
(4)ネームサーバー情報を確認
（画面はこのまま閉じず、ネームサーバー情報をお名前.com側にコピー・貼り付けします）
2.2.お名前.comでネームサーバーの変更
《お名前.com 側》
(1) ドメインNaviからログイン
(2) 「ドメイン設定」-「ネームサーバー変更」をクリック
(3) ドメイン名選択、登録情報確認
(4) 「他のネームサーバーを選択」タブをクリックし、
ネームサーバーを変更(ネームサーバー情報の入力)します。
「ネームサーバー情報を入力」欄に、前述 XSERVER側 (4)で確認したネームサーバー情報(※)を入力します。
※あるいは、ネームサーバー情報は、前述 「1. レンタルサーバー契約・ドメイン取得」の手順(11)で受信したメール文末にも記載されています。
(5) 入力内容に誤りがないことを確認し、「確認画面に進む」→「設定する」ボタンをクリックします。
一通りの手順としては、以上になります。
※上記設定の反映には、最大72時間ほどかかるそうです。
このドメインでWordPressを利用する場合には、インストールが直ちにできません。待機期間を考慮に入れ、余裕をもって作業する必要がありますので、その点は注意が必要ですね。
※また、説明を割愛しましたが、正式契約完了には、XSERVER インフォパネル側からのサーバー代金支払い手続きも必要です。どうかそちらもお忘れなきようご注意ください。
Webマーケティングが学べる講座まとめ
Webマーケティングとは
Web(サイトやツールなど)を活用して儲けを生む仕組みを作る集客・販売戦略活動
SEOやリスティング広告など、
Web制作に関わる以上、
日々、Webマーケティングのスキルアップの必要性を感じます。
今日は、仕事に活かせそうなWebマーケティング学習講座について、まとめてみました。
仕事に活かせそうなWebマーケティング学習講座紹介
Schoo（スクー）Webマーケティングに必要な考え方と企画【nanapiのWebマーケティング特訓】 :
Schooの有料会員(※)になると過去の録画授業として視聴できます(全3回授業)
この講座では、
・Webマーケティングとは？
・企画の考え方
・リサーチについて
・SEOとは？
・データ解析・アクセス解析について
などが学べます。
※プレミアムプラン会員 月額980円～
Schooのプレミアム会員について
この講座以外も幅広く受講できて講座はかなり充実しているので、Schooのプレミアム会員になるのはとってもおすすめです。
TechAcademyオンラインブートキャンプ マーケティングコース
TechAcademyオンラインブートキャンプ マーケティングコース
8/20(日)まで、先割(受講料8%オフ)キャンペーン実施中
Webマーケティングの基礎が一通りオンラインで学べる講座
分割払い利用可 社会人なら月々約4,125円～
学生の方なら月々約2,458円～可能です。
IMA検定 | 次世代型のネットマーケティング検定制度 :
こちらは、資格認定のための検定と講座がセットになっています。
受講・受験料 18,000円（税別）
運営団体：クラウドマネージメント協会
第27期生募集期間は2017年8月17日まで
「即実践できるネットマーケティングスキルを」を謳うIMA検定
Standardコース認定ホルダーの学習内容としては、
「サイト分析とリスティング広告の実践運用スキルを身につける！」
ことをターゲットとしています。
e-learningで受験に必要な知識を学び、受験もインターネットで可能。
実務に結び付くWebマーケティング知識が身につくとともに、就職サポートも受けられるようです。
WordPress 海外テーマ適用時に表示される ??????? の解消方法
WordPress 海外テーマ適用時に表示される ??????? の解消方法について
WordPressの海外テーマを適用している時、マルチバイトテキストが ??????? となってしまう現象が発生。
今日は、この現象の解決方法に関する備忘録です。
原因・解消方法
まとめ
このような場合の原因を調べた結果、
該当のPHPファイルで文字コードが「UTF-8」ではなくなっている時にこのような現象が起こりうるようでした。
そのため、今回もまずファイルのプロパティで文字コードを確認したところ、条件が一致、文字コードを「UTF-8」に変更・保存することで問題が解決することを確認しました。
【参考記事】
WordPressのテーマで日本語が文字化けしてしまう場合の対処方法 :
http://webseikatu.info/wordpress_jp_character_corruption
???????と表示されるテキスト - WPML :
https://wpml.org/ja/faq/%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88/
数字型リストマーカー (箇条書き)
＜目次＞
数字型リストマーカー
今日は以下のような数字型の箇条書きをマークアップする際の備忘録です。
●見出し
1. テキストテキストテキスト
●見出し
2. テキストテキストテキスト
3. テキストテキストテキスト
上記のように、
- 数字型リストマーカーによる箇条書き、連番
- 連番、途中番号の開始あり
を実現するには、以下のようにマークアップします。
標準的な数字タイプ (decimal)
[html]
<p>●見出し</p> <ol class="decimal"> <li>テキストテキストテキスト</li> </ol> <p>●見出し</p> <ol class="decimal"> <li value="2">テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ol>
※ value="途中開始する任意の数字を設定"
[css]
.decimal { list-style-type: decimal; }
ちなみに、他にも、以下のような表現ができますでの併せてご紹介しておきます。
※list-style-typeのパラメータ次第で、いろいろなバリエーションが可能ですね。
2桁数字タイプ(decimal-leading-zero)
[html]
<p>●見出し</p> <ol class="decimal-leading-zero"> <li>テキストテキストテキスト</li> </ol> <p>●見出し</p> <ol class="decimal-leading-zero"> <li value="2">テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ol>
[css]
.decimal-leading-zero { list-style-type: decimal-leading-zero; }
ローマ数字[小文字] タイプ(lower-roman)
[html]
<p>●見出し</p> <ol class="lower-roman"> <li>テキストテキストテキスト</li> </ol> <p>●見出し</p> <ol class="lower-roman"> <li value="2">テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ol>
[css]
.lower-roman{ list-style-type: lower-roman; }
漢数字タイプ (cjk-ideographic)
[html]
<p>●見出し</p> <ol class="cjk-ideographic"> <li>テキストテキストテキスト</li> </ol> <p>●見出し</p> <ol class="cjk-ideographic"> <li value="2">テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ol>
[css]
.cjk-ideographic { list-style-type: cjk-ideographic; }
【参考サイト】
スタイルシート［CSS］/リスト/マーカーの種類を指定する - TAG index :
http://www.tagindex.com/stylesheet/list/list_style_type.html
【WordPress】メディアライブラリが表示されなくなった場合の原因・対処法 (admin-ajax.php 編)
メディアライブラリが表示されなくなった場合の原因・対処法 (admin-ajax.php 編)
「WordPressのメディアライブラリが突然表示されなくなった」
今日は、そんな場合の原因・対処法について、シェアします。
※この障害の特徴としては、
- メディアライブラリ画面上で、くるくるが表示され、メディアが表示されない。
- リストではメディアが表示されるが、グリッドだと表示されない。
といった感じです。
この現象には、いくつか考えられる原因はあるようなのですが、主な原因としては、以下のようなケースが考えられます。
《想定されるケース》
(1) プラグインによる影響
(2) functions.php に謝った記述(文法エラー)がある
(3) Ajaxの動作不良
実際、私自身の場合、先日こちらの現象が発生した際、
上記(3)の解決により、問題が解消しました。
※上記(1)～(3)以外のケースもあるようですが、ここでは割愛させていただきます。
備忘録を兼ね、以下より admin-ajax.php 修正による対処方法をご紹介いたします。
admin-ajax.php 修正
WordPressのwp-adminフォルダにある、admin-ajax.phpの一部を以下のように修正します。
《修正前》
@header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
《修正後》
if(in_array($_POST['action'], array('query-attachments', 'send-attachment-to-editor'))){
@header('Content-Type: application/json; charset=' . get_option('blog_charset'));
}else{
@header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
}
なお、
前述の想定されるケース(1)には、
1. 一旦すべてのプラグインを停止して問題解消するか確認
2. (プラグイン停止により問題が解消した場合)
一つ一つプラグインを有効化して、問題原因となるプラグインを特定、利用プラグインから除外、
といった対応を、
想定されるケース(2)には、
デバッグモードを有効化するなどして、Syntaxエラーを発見、修正します。
【JavaScript】ページ遷移元情報取得用 パラメータ引き継ぎスクリプト
パラメータ引き継ぎスクリプト
今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページURLをパラメータで取得するためのJavaScriptをご紹介します。
【目的】
遷移元URL情報が引き継がれているため、
どういった被リンク先からアクセスされているのか、遷移先ページで把握することができます。
つまり、
(1) 被リンク先側ページで作成するリンクにこのコードを埋め込む
(2) 遷移先で遷移元URL情報が表示される
という流れになります。
サンプルコード
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>Template Format</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="css/styles.css" type="text/css"> <!-- パラメータ引き継ぎ設定スクリプト--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> var prm; function retrieveGETqs() { var query = window.location.search.substring(1); return query; /* 引数がない時は処理しない */ if (!query) return false; } $(function(){ //パラメータを取得 var str = retrieveGETqs(); prm = decodeURIComponent(str); //$('a.linkA').attr("href", "( 遷移先URL )" + prm); $('a.linkA').attr("href", "http://tkksn-portfolio.lolipop.jp/works/lesson/prm_demo?=" + prm); }) ;//# sourceURL=foobar.js // JavaScript Document </script> <!-- パラメータ引き継ぎ設定スクリプト--> </head> <body> <a class="linkA"><img src='http://tkksn-portfolio.lolipop.jp/works/lesson/wp-content/uploads/2017/08/KAZUKIhgfdrfgh_TP_V-300x200.jpg'></a> </body> </html>
動作確認方法
1. 上記サンプルコードで作成したページをブラウザで表示します。
2. ブラウザのアドレスバーでページURLの末尾にパラメータを入力 (ここでは、試しに 「 ?q=1234 」と入力してみます。)
3. リンクを埋め込んだ画像をクリックします。
4. 遷移先ページのアドレスバーにパラメータ情報が表示されます。
Chromeでのデバッグ方法
1. Chromeブラウザで遷移元ページを表示
2. 上記ページで右クリック([Ctrl]+{Shift]+[I])でディベロッパツールを起動します。
3. [Sources]タブに移動し、foobar.js ※ をクリックします。
※通常、HTMLファイル内に記述されたJavaScriptファイルは表示されません。
今回のサンプルスクリプトには、
>||
;//# sourceURL=foobar.js
|
の一文を記述していることで、デバッグ画面に foobar.js として表示されています。
4. パラメータに値が取得できていることを確認するため、変数代入箇所にブレイクポイント(行番号箇所をクリック)を設定します。
5. リンク付き画像をクリックします。
6. ステップオーバーを実行(クリック)します。
7. 変数に値(今回の場合「?q=1234」)が設定されていることが確認できます。
【参考サイト】
chrome デバッグ ステップイン
Chromeでjavascriptデバッグ！まず半歩♪ : https://www.slideshare.net/yuka2py/chromejavascript
【Photoshop】Photoshop で枠線を描く
Photshopで枠線(塗りつぶしなし)図形を描く方法
マニュアルの説明書作成時など、
読み込んだ画像の一部に枠線でマーキングする際に使用する方法です。
MSペイントでは難なくできるようなことが、慣れないと意外と分からなかったりします。
「今さら？」という感じはありますが、
実際「どうやるんだっけ？？？」と躓いた自身の経験から、
備忘録としてご紹介しておきます。
ここでは、大きく分けて以下2つの操作を行います。
【手順】
1. 画像をPhotoshopで開く
ここでは、以下画像の「OK」ボタンを赤の枠線で囲んでみます。
2. 選択ツールから「長方形選択ツール」を選択
3. 「OK」ボタンの箇所を長方形選択ツールで選択します。
4. 選択後の線にカーソルを合わせ、以下の矢印が表示されるところで右クリックします。
5. 「境界線を描く」を選択します。
6. 「境界線」ダイアログで線幅、色を設定、「OK」ボタンをクリックします。
7．完成
ファイルの更新状況を管理したい時に役立つサンプルマクロ
ファイルの更新状況を管理したい時に役立つExcel用マクロ
日々ファイルを作成・更新していると、フォルダ内のファイル更新日時を一覧化したいって思うことが度々あります。
が、Windowsのエクスプローラー標準機能には、残念ながらそのような機能はありません。
（ファイルのパス一覧を取得する「パスのコピー」機能はあるのだから、このような機能も実装されてても良い気がしますが。。。）
そこで、
特別なツールなどを使わず、
「特定フォルダ内のファイル名、更新日時を取得・一覧化」する方法を調べました。
その結果、見つけたのが今回以下記事でご紹介いただいているサンプルマクロによる方法です。
www.relief.jp
すぐに作ってみたところ、
見事思った通りの一覧を出力してくれて重宝しています。
ということで、
以下より、その作成手順をご紹介いたします。
【Excel VBA】指定フォルダ内のファイル名と更新日時の一覧を作成する VBA
サイトを構成する複数ファイルの更新状況を把握、管理するのに役立つサンプルマクロです。
【作成手順】
1. Excelを起動します。
2. 「開発」タブ-「マクロ」 をクリックします。
※「開発」タブは標準では表示されていません。
「開発」タブが表示されていない状態の方は、以下を参考に「開発」タブを表示してください。
[開発] タブを表示する - Office サポート
3. 「Visual Basic」をクリックします。
⇒ Visual Basic エディタが表示されます。
4. VBAプロジェクトで「ThisWorkbook」をダブルクリックします。
⇒ コードウィンドウが表示されます。
5. コードウィンドウに下記コードをコピー・貼り付けします。
6. VBエディタのメニューより実行(Sub/ユーザーフォームの実行)してみます。
7. ファイル選択画面が表示されたら、適当なフォルダを選択します。
8. 実行結果として、ファイル一覧が正しく作成されることを確認します。
9. 無事確認ができれば、VBエディタのメニューより「ファイル」-「終了してMicrosoft Excelへ戻る」をクリックし、VBエディタ画面を閉じます。
《サンプルマクロ》
ソースは以下の通り
Sub FileUpdateList()
Dim fld As FileDialog
Dim fol_path As String ' フォルダーのフルパス
Dim f_name As String ' ファイル名
Dim i As Long
Set fld = Application.FileDialog(msoFileDialogFolderPicker)
If fld.Show = 0 Then Exit Sub 'キャンセル時
fol_path = fld.SelectedItems(1) 'フォルダのフルパスを変数に格納
f_name = Dir(fol_path & "\*") '指定されたフォルダの一つ目のファイル名を取得
If f_name = "" Then MsgBox "ファイルが存在しません。": Exit Sub
Worksheets.Add Before:=Sheets(1)
Range("A1").Value = fol_path
Range("A2").Value = "のファイル一覧"
Range("A4").Value = "ファイル名"
Range("B4").Value = "最終更新日時"
ChDir fol_path & "\" 'カレントフォルダの変更
i = 5
Do Until f_name = ""
Cells(i, "A").Value = f_name
Cells(i, "B").Value = FileDateTime(f_name)
i = i + 1
f_name = Dir '次のファイル名を取得
Loop
MsgBox Sheets(1).Name & "に一覧を作成しました。"
End Sub
【マクロ実行手順】
以下、作成したマクロの実行手順です。
1. 本マクロを実装したExcelファイルを開きます。
2. 「開発」タブ-「マクロ」 をクリックします。
3. 「マクロ」ウィンドウで先程のマクロが選択されている状態で「実行」ボタンをクリックします。
4. ファイル選択画面が表示されたら、適当なフォルダを選択します。
該当フォルダ内のファイル一覧が作成されたら完了です。
【WordPress】サイト移設時の最強助っ人ツール！「All-in-One WP Migration」
サイトのお引っ越しが簡単・楽々になるプラグイン 「All-in-One WP Migration」
WordPressのサイト移行って、前はとっても面倒だった記憶があるけど、
今はこんな便利なツールがあるんですね。
「All-in-One WP Migration」を使えば、面倒な手間は一切なし。
サイトのまるごとコピーが簡単・楽々です。
以下、「All-in-One WP Migration」による移行手順をご紹介いたします。
「All-in-One WP Migration」による移行手順
1. 「All-in-One WP Migration」を入手します。
All-in-One WP Migration — WordPress プラグイン :
https://ja.wordpress.org/plugins/all-in-one-wp-migration/
2. 移設元サイト、移設先サイトの両方に「All-in-One WP Migration」をインストール、有効化します。
3. 移行元サイトで「All-in-One WP Migration」-「エクスポート」をクリックします。
※この時、「高度なオプション(Advqnced Option)」をクリック、展開して、移行データ詳細を適宜設定します。
※初期設定ではチェックが入っておらず、以下のような状態です。
メディアライブラリデータや、プラグインデータなど、すべてまるごと移行する場合には、「高度なオプション(Advqnced Option)」の設定を変更する必要はありません。
対して、記事などのコンテンツを含めず、サイトの設計だけをバックアップする場合、「データベースをクスポートしない (SQL)」にチェックを入れます。
移行対象のデータに応じて、オプション設定を適宜変更してください。
(「高度なオプション(Advqnced Option)」 設定例)
※移行の必要がないデータにチェックを入れます。
4. エクスポートの形式を選択します。
ここでは、「ファイル(FILE)」を選択します。
5.エクスポートデータのダウンロードを実行します。
6. 移設先サイトで先程のエクスポートデータをインポートします。
7. 以下メッセージが表示されたら、インポート完了です。
【補足】コンテンツの移行について
上記プラグインでコンテンツ(記事・画像)を移行する場合、一部のみを選択し、エクスポートすることができません。
一部のコンテンツだけをコピーしたいという場合
上記プラグイン実行時にはエクスポート対象からコンテンツデータを含めず(Advqnced Optionでチェックを外す)、以下のプラグインなどを使用し、別途移行するのが良いと思います。
DeMomentSomTres Export — WordPress プラグイン :
https://ja.wordpress.org/plugins/demomentsomtres-wp-export/
こちらのプラグインを使用すると、
記事のステータス、作成時期を絞り込んだうえ、記事データ(画像含む)をエクスポートすることが可能です。
Google AnalyticsをWordPressサイトに設置する ～All in One SEO (プラグイン)編～
All in One SEO (プラグイン) で設置する場合
[準備]
1. All in One SEOがインストールされていない場合には、まずインストール、有効化します。
All in One SEO Pack — WordPress プラグイン :
https://ja.wordpress.org/plugins/all-in-one-seo-packja.wordpress.org
2. 自身のサイトで予め Analyticsのトラッキングコードを確認しておきます。
< 確認方法 >
(1) Analyticsサイトにログイン後、「管理」>「トラッキング情報」>「トラッキングコード」をクリックします。
(2)「トラッキングコード」の画面の「トラッキングID」を確認します。
All in One SEO Pack — WordPress プラグイン
1. All in One SEOの「一般設定」をクリックします。
2. 表示された画面で「Google Settings」セクションまでスクロール移動します。
3. 下図の赤枠内箇所(※以下、3.1. 及び 3.2.参照)を設定します。
3.1. Google Analytics IDの値にUA-から続く自身のトラッキングコードを入力します。
3.2. Advanced Analytics Optionsを「有効」に設定します。
4. [設定を更新]ボタンで設定を更新します。
設定は以上となります。
【WordPress】投稿記事編集画面で標準エディタ(本文)を非表示にする方法
投稿記事編集画面で標準エディタ(本文)を非表示にする方法 2種
今日は、WordPress管理画面(投稿記事 編集画面)から標準エディタを表示させないようにするための実現方法を検討してみました。
確認した以下2通りの方法について、お伝えします。
1) ユーザー権限で表示を制御する方法
2) CSSで表示を制御する方法
[用途]
記事の入力を、専用のカスタムフィールドで行うようにカスタマイズした場合など、標準のエディタフィールドが不要となる場合に。
1) ユーザー権限で表示を制御する方法
以下コードを functions.phpに記述することにより、
編集者権限のユーザーが投稿記事編集画面を開いている場合、
標準エディタが非表示となります。
/* ++++++++++++++++++++++++++++ */
/* デフォルトエディタを非表示（ユーザー権限で制御）
/* ++++++++++++++++++++++++++++ */
add_action( 'init' , 'my_remove_post_editor_support' );
function my_remove_post_editor_support() {
if ( current_user_can('editor') ) { // ログインしているユーザの権限グループを指定
remove_post_type_support( 'post', 'editor' );
}
}
2) CSSで表示を制御する方法
[前提]
標準エディタの表示・非表示を切り替え可能にするため、
その目的用にカスタムフィールドを追加しています。
※ここでは下記の「default_editor_on」がそのフィールド名を指しています。
※カスタムフィールドは、プラグイン「Advanced Custom Fields(注)」の真偽タイプで作成しています。
(注) Advanced Custom Fields について
以下、「Advanced Custom Fields」ダウンロードサイトです。
ja.wordpress.org
使い方については、以下、「kotori」さんの記事が非常にわかりやすくて、参考になると思います。
kotori-blog.com
以下コードをfunctions.phpに記述することにより、
カスタムフィールド「default_editor_on」のチェックボックスがオンになっていない場合、標準エディタが非表示となります。
/* ++++++++++++++++++++++++++++ */
/* 標準エディタをcssで非表示
/* ++++++++++++++++++++++++++++ */
add_action('admin_head', 'post_output_css');
function post_output_css() {
$pt = get_post_type();
if ($pt == 'post' ) { //投稿の場合はpost
//エディタ表示切替
$editor_on = get_field('default_editor_on');
if($editor_on){
}else{
//処理
$hide_postdiv_css = '<style type="text/css">#postdiv, #postdivrich { display: none; }</style>';
echo $hide_postdiv_css;
}
//if ($pt == 'post') { //投稿の場合はpost
//$hide_postdiv_css = '<style type="text/css">#postdiv, #postdivrich { display: none; }</style>';
//echo $hide_postdiv_css;
}
}
//add_action('admin_head', 'post_output_css');
まとめ
上記 1) 2) いずれの方法でも、意図した通り、標準エディタを非表示にすることができました。
より使い勝手の良いWordPress UI実現を目指し、こうした方法も上手にとり入れていきたいものですね。
参考記事一覧
WordPress：カスタム投稿タイプの投稿画面から、本文(エディタ)をCSSで非表示にしたい | takenote
デフォルトの編集エリアを非表示＠WordPress - ショウジンブログ
WordPress投稿画面から本文の編集エリアを消す方法 – Pannyatto
デフォルト投稿postの本文フィールドを非表示にする
WordPress 管理画面の投稿編集画面で不要な項目を非表示にする方法 - by Takumi Hirashima
WordPress管理画面の投稿ページの本文（エディタ部分）をCSSで非表示にする方法 | Web技術Tips
デフォルト投稿postの本文フィールドを非表示にする
Gmail でリマインド(同報)メールを送信する
5月13日 以下記事の続編です。
times-diary.hatenablog.com
Yet Another Mail Merge(Chrome 拡張)で、リマインドメール送信
Google Chrome 拡張機能の「Yet Another Mail Merge」を利用すると、Googleメールから一斉同報メールを簡単に送信することができます。
※送信できるのは、一日100件までという上限はあります。
【必要なもの】
1. Chrome ブラウザ
2. Gmailアカウント
3. Gmail
4. Googleスプレッドシート
【準備】
1. Chromeを起動します。
2. Chromeウエブストアで「Yet Another Mail Merge」を検索、インストールします。
chrome.google.com
3. Googleスプレッドシートの参加者リストを開きます。
4. 新規シートを作成し、シート1列目がメールアドレスになるように参加者リストを加工しておきます。
( 上記を一斉同報メール送信用に使用します)
5. Gmailで一斉同報メール(今回は参加者リマインドメール用)の件名、本文を作成し、下書き保存しておきます。
【手順】
1. 前述の【準備】で作成したGoogleスプレッドシートの参加者リストを開きます。
※あるいは、新規シートで以下手順を進め、手順3後で新規シートに参加者リストをコピー・貼付けしてもOKです。
2. メニューの「アドオン」-「Yet Another Mail Merge」-「メールマージを開始」を選択します。
3. 連絡先を設定します
※今回は、セミナー参加者リストにあるメールアドレスに送信するため、「Add emails myself」をクリックします。
4. 参加者リストの準備
(1) 手順1 で参加者リストから進めている場合には、現在のシートをそのまま使用します。
(2) 手順1 で新規シートから進めている場合には、既存参加者リストのデータを現在のシートにコピー・貼付けします。
この時、シート1列目をメールアドレスになるようにします。
5. 現在のシートに参加者データが準備できたら再び、メニューの「アドオン」-「Yet Another Mail Merge」-「メールマージを開始」を選択します。
6. 以下ダイアログ画面で「Continue」をクリックします。
7. 「送信者名」を設定、「下書き」に対象として作成したメールを選択します。
※「Track emails opend,clicked or bounced」のチェックは必須ではありませんが、チェックしておくと送信したメールの開封状況が確認できて便利です。
8. リマインドメール送信実行
(1) 初回は、「テストメールを送信」を実行し、正しくリマインドメールが送信されるか確認します。
(2) 上記(1)テストメール送信確認後、「メール送信」を実行します。
9. リマインドメール送信用参加者リストに状況が反映されます。
無料でここまでできる！ Googleフォームで作るセミナー受付システム
1. 本システムの機能
=================================
1). セミナー申し込みフォーム
2). 参加者リスト自動生成
3). 受講票兼自動返信メール作成・送信
4). 関係者宛 受付通知メール送信
5). リマインドメール送信
2. システムの流れ
=================================
1). Googleフォームでセミナー申し込みフォームを作成・送信 (参加者)
2). Googleスプレッドシートで参加者リストを自動作成 (システム)
3). 受講票兼自動返信メール送信 (システム)
4). 関係者宛受付通知メール送信 (システム)
5). リマインドメール送信 ( 管理者 + システム )
3. 作業手順
=================================
1). セミナー申し込みフォームを作成
（参加者リスト自動生成機能付き、通知機能付き）
2). 受講票兼自動返信メール機能作成
3). リマインドメール送信機能作成
1). セミナー申し込みフォームを作成
（参加者リスト自動生成機能付き、通知機能付き）
1). Googleフォームでセミナー申し込みフォームを作成
参加者リスト自動生成機能付きのGoogleフォーム作成は、
以下、a). b). の通り、
a). Googleフォームから作成、
b). Googleスプレッドシートから作成
の2通りがあります。
a). Googleフォームから作成
1.1. Googleドライブにアクセス
1.2. 「新規」-「その他」-「Googleフォーム」を選択
1.3. フォーム右横(質問を追加)ボタンから、参加者のお名前、連絡先メールアドレスなど、必要項目を作成
1.4. 「設定」ボタンから、送信時「確認メッセージ」を作成、保存。
※確認メッセージの文章については、以下サイトの文章をそのまま使用させていただきました。
【参考サイト】
ASCII.jp：30分で作れる！セミナー受付がラクになる自動システム (1/4)｜Web制作をちょっと便利にするGoogle Apps Script入門 : http://ascii.jp/elem/000/000/884/884133/
【参加者リスト自動生成機能を追加】
1.5. 画面上「プレビュー」ボタンをクリックし、Googleフォームをテスト送信します。
(Googleフォームに「テスト送信」という機能があるわけではありません。テストとして必要項目を入力し、通常通り「送信」ボタンをクリックします)
1.6. 再度 GoogleドライブからGoogleフォーム編集画面に戻り、「回答」タブをクリックします。
1.7. フォーム右上の「スプレッドシートの作成」ボタンをクリックします。
1.8. 以下設定画面より、回答(参加者申し込みリスト) の記録先を設定します。
※スプレッドシートが新規作成の場合には、上図のように、適宜シート名を設定します。
以上の手順により、Googleフォームによる申し込み受信結果がすべて自動でGoogleスプレッドシートに記録されます。
(参加者リスト自動生成機能 作成完了)
【関係者宛受付通知メール送信機能を追加】
1.9. 以下箇所をクリックします。
1.10. 「新しい回答についてのメール通知を受け取る」をクリックします。
上記設定により、Googleフォームから申し込みがある都度、メールで通知されます。
1.1. Googleドライブにアクセス
1.3. 新規シート上で、「ツール」-「フォームを作成」を選択
1.4. フォーム右横(質問を追加)ボタンから、参加者のお名前、連絡先メールアドレスなど、必要項目を作成
Googleスプレッドシートからの以上の手順でGoogleフォームを作成することで、Googleフォームによる申し込み受信結果がすべて自動でGoogleスプレッドシートに記録されます。
【関係者宛受付通知メール送信機能を追加】
1.5. 前述、a. Googleフォームから作成 1.9.～1.10を参考に、関係者宛受付通知メール送信機能を追加します。
2). 受講票兼自動返信メール作成・送信機能作成
回答を記録するGoogleスプレッドシートにスクリプトを設定します。
2.1. 対象のGoogleフォームを編集画面で開きます。
2.2. 以下ボタンをクリックし、「スクリプトエディタ」をクリックします。
「スクリプトエディタ」画面を開きます。
2.3. 以下のコードを入力します。
function submitForm(e){
var itemResponses = e.response.getItemResponses();
var username = '';
var mail = '';
for (var i = 0; i < itemResponses.length; i++) {
var itemResponse = itemResponses[i];
var question = itemResponse.getItem().getTitle();
var answer = itemResponse.getResponse();
if (question == 'お名前'){ username = answer; }
if (question == 'メールアドレス'){ mail = answer; }
}
var title = 'セミナー名';
sendMailToUser(title, username, mail);
}
function sendMailToUser(title, username, mail){
var png = getMapImage("Googleマップで表示する場所(会場住所)");
var message = '<html><body><p>' + username + '様<br><br>'
+ 'この度は弊社主催のセミナーに'
+ 'お申込みいただき、誠にありがとうございます。<br>'
+ '当日ご来場の際は本状を印刷して受付にご提出ください。<br><br>'
+ '――お申込みのセミナー情報――<br><br>'
+ '【セミナー名】セミナー名を記述<br>'
+ '【開催日時】開催日時を記述<br>'
+ '【開催場所】開催場所を記述<br>'
+ '【開催住所】開催住所を記述<br>'
+ '（最寄り駅：最寄り駅名を記述）<br><br>'
+ '【Googleマップ】<br>'
+ '<img src="cid:map" width="400px" height="300px"><br>'
+ '――――――――<br><br>'
+ '【セミナー運営事務局】<br>'
+ '会社名、担当者名を記述 ( 例. 株式会社●●● 担当：△△ )<br>'
+ '電話番号を記述<br>'
+ 'メールアドレスを記述</body</html>';
MailApp.sendEmail({
to: mail,
subject: title,
htmlBody: message,
inlineImages:{ map: png},
attachments:[png],
from:'送信元メールアドレスを記述',
name:'〇〇事務局など、送信者名を記述',
replyTo:'返信先メールアドレスを記述'
});
}
function getMapImage(point) {
var map = Maps.newStaticMap().setSize(800, 600)
.setCenter(point).setZoom(18).setLanguage('ja')
.setMapType(Maps.StaticMap.Type.ROADMAP);
map.addMarker(point);
return map.getBlob().getAs(MimeType.PNG);
}※上記スクリプトについては、以下サイトのスクリプトをそのまま使用させていただきました。
【参考サイト】
ASCII.jp：30分で作れる！セミナー受付がラクになる自動システム (1/4)｜Web制作をちょっと便利にするGoogle Apps Script入門 : http://ascii.jp/elem/000/000/884/884133/
2.4. スクリプトエディタ画面のメニュー 「編集」-「現在のプロジェクトのトリガー」をクリックします。
⇒ 現在のプロジェクトのトリガー」ダイアログが表示されます。
2.5. 上記ダイアログで「submitForm」「フォームから」「フォーム送信時」 を設定し、保存します。
※承認を求める画面が表示されたら、「続行」「承認する」ボタンをクリックし、スクリプトのトリガー設定を完了します。
(これでスクリプトの実行が許可されました)
2.6. Googleフォーム作成画面に戻り、テスト送信を実行します。
※受講票兼自動返信メールの送信が確認できればOKです。
3). リマインドメール送信機能作成
Google Chrome 拡張機能の「Yet Another Mail Merge」を利用する方法です。
こちらの詳細については、後日記事でご紹介します。
【本日記事で参考にさせていただいたサイト】
ASCII.jp：30分で作れる！セミナー受付がラクになる自動システム (2/4)｜Web制作をちょっと便利にするGoogle Apps Script入門 : http://ascii.jp/elem/000/000/884/884133/index-2.html
Googleフォーム機能で応募フォームやアンケートフォームを手軽に作成する | ワークスタイル変革サービス【MasterApps】 : http://www.master-apps.jp/document/google-document-form.html
プラグインなし WordPressにカスタム投稿タイプを作成する
カスタム投稿タイプ作成方法
WordPressのカスタム投稿タイプという機能を活用すると、
通常の投稿タイプとは区別して記事を作成・掲載していきたい場合に便利です。
、
カスタム投稿タイプの作成には、以下、「Custom Post Type UI」といった有名で非常に便利なプラグインもありますが、今回は、プラグインなし、function.php に追記する形式で実現する際の手順をご紹介します。
Custom Post Type UI — WordPress プラグイン :
https://ja.wordpress.org/plugins/custom-post-type-ui/
カスタム投稿タイプ作成方法 (プラグインなし)
【手順】
1. custom.php を作成
カスタム投稿タイプ作成のためのコードを記述
2. function.php で上記を読み込み
function.php に、custom.php 読み込みのためのコードを追加
カスタム投稿タイプを追加するには、
以下のコードを funciton.phpに記述すれば良いのですが、
function.phpの後々の肥大化を避けるため、今回は custom.phpという別のファイルを作成し、function.phpで読み込むことにします。
《custom.php》
<?php /*カスタム投稿タイプ*/ // カスタム投稿タイプを作成する add_action('init', 'add_websites_post_type'); function add_websites_post_type() { //カスタム投稿タイプ（"custom"） register_post_type( 'custom1', array( 'label' => 'カスタム記事', //ラベル名 'hierarchical' => false, //falseの場合、階層構造なし 'public' => true, //通常はtrue 'has_archive' => true, //trueでindexページを生成 'supports' => array( 'title', //タイトルの表示を有効に 'editor' //本文の表示を有効に ) ) ); //カスタム投稿タイプ（ここまで） }
《function.php》
function.php には、以下コードを追記して、custom.phpを読み込むようにします。
require_once locate_template('lib/custom.php'); // その他カスタマイズの関数
※今回は、libフォルダを新規作成し、フォルダ内にcustom.phpを格納しています。
