【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を格納しています。
パスワード認証による閲覧制限 ２つの方法
＜目次＞
パスワード認証によるページ閲覧制限方法
1) 基本認証による方法
2) JavaScriptによる方法
1).基本認証による方法
1).基本認証による方法は、4/7の内容をご参照ください。
times-diary.hatenablog.com
2)、JavaScriptによる方法
2)、の方法は、以下の通りです。
【用意するファイル】
(1) 閲覧制限をかけるためのhtmlファイル
(2) 閲覧制限をかける対象となるhtmlファイル
1. index.htmlファイルを新規作成し、以下を記述します。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScriptによる閲覧制限</title> <script type="text/javascript"> function gate() { var UserInput = prompt("パスワードを入力して下さい:",""); location.href = UserInput + ".html"; } </script> </head> <body> <input type="button" value="パスワードを入力して秘密のページへアクセスする" onclick="gate();"> </body> </html>
2. 閲覧制限をかけたいhtmlファイルのファイル名を、
「パスワードにしたい文字列」.html とします。
たとえば、今回の場合、
パスワード：glass
なので、ファイル名を glass.htmlとします。
3. 上記2つのファイル※を同じディレクトリに配置します。
※(1)閲覧制限パスワード入力用ページ、(2)閲覧対象ページ
これで、準備ができました。
対象のディレクトリにブラウザでアクセスします。
【動作確認】
1. 以下ボタンが表示されますので、クリックします。
⇒パスワード入力を求めるインプットボックスが表示されます。
2. パスワード「glass」を入力します。
⇒閲覧制限付きページが表示されました。
（パスワード入力後、以下習作ページにジャンプ）
※パスワード入力後、上記習作ページにジャンプします。
上記方法は、以下サイトを参考にさせていただきました。
【参考サイト】
2/3 簡単に閲覧制限！JavaScriptでパスワード認証を設定 [ホームページ作成] All About : https://allabout.co.jp/gm/gc/23839/2/
「.htaccess」ファイルを設置する（基本認証編）
サイトに「.htaccess」ファイルを設置しました。
「.htaccess」とは
Webサーバーに設置すると、設置したディレクトリ以下に対して制御することができます。
※Webサーバーに「Apache」を使用していることが前提
「.htaccess」ファイルでできること
主な用途としては、以下の通り
- 基本認証によるアクセス制御
- リダイレクト
- 404エラーページの作成
今回の私の設置目的としては、基本認証によるアクセス制御(ID、パスワードを入力しないとページが表示されないようにすること)でした。
「.htaccess」ファイルの作成方法（基本認証編）
1. メモ帳など、エディタを使い、以下のコードを記述します。
以下、「.htaccess」ファイルに記述する内容です。
《基本認証のための作成例》
<Files ~ "^\.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /home/(フルパス)/.htpasswd AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user order deny,allow
[補足]
ちなみに、.htaccessファイルの作成支援サイトもたくさんあります。
一から記入するのが心配な方は、こうしたサイトを利用すると簡単に作成できます。
.htaccess ファイルを簡単作成「.htaccess Editor」 :
http://www.htaccesseditor.com/
よく使うhtaccess作成（生成） :
http://htaccess.cman.jp/
※以下ベーシック（基本）認証専用
ベーシック認証用 .htacess 作成ツール | Softel labs :
https://www.softel.co.jp/labs/tools/basic-auth/
ベーシック認証のページ、htaccessサンプルのダウンロード、暗号化も。アクセス制限にご利用下さい。 :
http://www.chama.ne.jp/access/
Basic認証｜.htaccess :
https://w3g.jp/others/htaccess/basic_authentication
2. ファイル名を「.htaccess」として保存します。
※拡張子がない状態で保存できない場合には、
.txtなどの形式でいったん保存し、エクスプローラー画面で「名前の変更」から.以下の拡張子部分を削除すればOK。
※注意点としては、ファイル内の最後に必ず改行を入れること。
3. 以上の手順で作成した「.htaccess」ファイルを、制御を有効化したいWebサーバーのディレクトリに配置します。
なお、上記コード作成時、
「サイトのフルパスが分からない」
という場合があります。
実は、私も今回そのような状態でした。
そのため、最初そのことに気づかず、ファイルを設置しても思ったように機能せず、しばらく悩みました。
というのは、サイトのフルパスは、ブラウザで見ているURLとは違うからです。
ということで、以下フルパスの確認方法についても併せて記載しておきます。
【WordPress】カスタムフィールド活用術：記事ごとにCSSを設定する
個別の記事にCSSを設定する
カスタムフィールドを活用すると、作成中の記事に独自のスタイルを設定することができます。
WordPressの記事単体に独自のスタイルを設定したい場合、
エディタ内でCSSを書いてもスタイルを設定することはできますが、
これは推奨できる方法ではありません。
なので、ここではカスタムフィールドを活用したCSS設定方法をシェアしますね。
手順
1. カスタムフィールドを作成
1.1. 投稿の編集画面から、カスタムフィールドを作成します。
カスタムフィールド追加欄が表示されていない場合は、投稿画面上部、「表示オプション」から、カスタムフィールドにチェックがない可能性があります。未チェックなら、チェックを入れ、表示させます。
1.2. カスタムフィールドを作成します。
※フィールド名は任意です。ここでは、「custom_CSS」で作成します。
2. functions.php の編集
※functions.php 編集前には念のためバックアップを取りましょう。
2.1. functions.php に2.2.以下のコードを追記します。
ただし、ここでは functions.php の今後の管理を考慮し、別のファイルを新規作成し、以下を記述することにします。
こうして外部ファイル化すると、functions.php があまりごちゃごちゃせず、シンプルかつ効率的です。
また、functions.php自体は極力編集しないで済むので、functions.phpファイル破損のリスクが避けられます。
2.2. ここでは、widgets.phpというファイルを新規作成し、下記コードを記述することにします。
また、functions.phpからの外部参照を一箇所にまとめたいので、「lib」フォルダを新規作成し、そのフォルダ内にwidgets.phpファイルを配置します。
《widgets.php》
<?php /* * Custom CSS Widget */ function custom_css_hooks() { add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high'); } function custom_css_input() { global $post; echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>'; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST['custom_css']; update_post_meta($post_id, '_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } } add_action('admin_menu', 'custom_css_hooks'); add_action('save_post', 'save_custom_css'); add_action('wp_head','insert_custom_css'); ?>
2.3. functions.php には、上記コード参照用に以下コードを追記します。
《functions.php》
/*widgets.php を読み込み*/
require_once locate_template('lib/widgets.php'); // サイドバー、ウィジェットの関数
以上で、「Custom CSS」ウイジェットが追加され、custom_CSSフィールドに個別記事ページごとのCSSを設定することができるようになりました。
あとは、該当の記事編集画面を開き、custom_CSSフィールドの値欄にCSSを記述すればOKです。
【参考サイト】
Custom CSS Per Post | Digging Into WordPress :
https://digwp.com/2010/02/custom-css-per-post/
【CSS3】 アニメーションボタン
CSS3によるアニメーションボタン No.2
拡大・縮小するアニメーションボタンを作成しました。
Demo css3 アニメーションボタン(拡大・縮小) | WebStock
以下、ソースを記載します。
[ソース] html
<a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a>
※上記、サイト名、パス、画像ファイル名は適宜変更してください。
[ソース] css
.area-main-topbtnr{ z-index:1;animation:a 1.4s;animation-iteration-count:infinite; -webkit-animation:a 1.4s; -webkit-animation-iteration-count:infinite } @keyframes a{ 0%{transform:scale(0.7,0.7)} 0%,50%{opacity:1} 50%{transform:scale(1.0,1.0)} to{transform:scale(0.7,0.7)} } @-webkit-keyframes a{ 0%,to{opacity:1} 0%{-webkit-transform:scale(0.7,0.7)} 50%{ -webkit-transform:scale(1.0,1.0)}50%, to{opacity:1}to{-webkit-transform:scale(0.7,0.7) }
[捕捉]
ちなみに、以下のようなボタンジェネレーターサイトを利用すると、
画像不要、CSSだけで簡単にボタンが作れます。
CSS Button Generator - imageless css buttons maker :
http://css-button-generator.com
グローバルナビのテキストをhoverで切り替える方法
グローバルナビのテキストをhoverで切り替える方法
グローバルナビにマウスを重ねた時、文字を変更する方法を確認、実装してみました。
ここでは、下図のように、
↓
標準時英語表記のグローバルナビメニュー
↓
(マウスホバー)
↓
日本語表記する
という動作を実現してみました。
実現方法は、以下の通りです。
【方法】onMouseOverでメニューのテキストを変更する
[コード例]
<li class="mission_statement"><a href="#" data-nav-section="mission_statement"><span class="en" onMouseOver="this.innerText='ミッション'" onMouseOut="this.innerText='Mission Statement'">Mission Statement</span></a></li>
[補足]
CSS調整用に英語表記と日本語表記のそれぞれにクラス名を付けています。
マウスが重なった時のみ表記される日本語テキストをonMouseOverで指定、マウスが離れると表記される英語メニューをonMouseOutで指定しています。
以上、マウスオーバー(hover)でテキストを変更する方法でした。
