Category

WordPress

無料でホームページ制作(wordpress)を試してみる

By | WordPress

SSL付きのテストサイト(wordPress)が必要だったので、何か方法はないものかと考えてみました。
Google Cloud Platformの仮想マシンの最小スペックは特定の条件で無料のようなので、これにLet’s Encryptを設定することにしました。

まずは、「Cloud Launcher」を使った構築をためしてみました。
Cloud Launcherをクリックすると構築することのできる項目が表示されるので、検索で”wordPress”を検索します。
説明画面の「 Compute Engine 上で起動 」をクリックし、必要な項目を入力します。
無料で使うにはZoneが"US"でMachine Typeは最小の”f1-micro”。 Disk size in GB が”30以下”それぞれを条件に合わせ「デプロイ」をクリックします。

しばらく待つとwordpressの完成です。簡単ですね。
完了すると、アカウント情報が表示されます。あとは、SSLを設定するだけなのですが、うまく設定できませんでした。いろいろ確認したのですが解決しなかったので他の方法にしたいと思います。今度は超高速WordPress仮想マシンKUSANAGIを導入を試してみます。詳しいやり方に関しては配布先に詳しくかかれwているのでそちらを参考にしてください。KUSANAGI for GCP

設定でつまづいたところだけお伝えします。

まず最初にマシンのスペックが低いとKUSANAGIの初期設定にあるKUSANAGIシステムのアップデート

yum --enablerepo=remi,remi-php56 update -y

を行うとうまくいかないようなので、説明で推奨されてる”vCPUx2”を選択し、あとでマシンのスペックを変更するようにします。
KUSANAGIシステムのアップデートが終了後、インスタンスを一旦停止し「編集」をクリックしマシンのスペックを”f1-micro”に変更します。
あとは、説明通り進めていけば問題なく完了します。

僕はこのマシンのスペックの切替でうまくいかずしばらく悩みました。調べた際に参考にしたサイトでは

kusanagi init

の後にマシンのスペックを変更するようにあったのですが、そのごMYAQLがうまく起動することができなくなってしまいました。
仮説ですが、VMインスタンスはデフォルトでは外部IPがインスタンスの起動、再起動を行うたびに変わってしまいます(エフェメラル外部 IP アドレス)。多分MYSQLの動作にこのIPを参照するとこがあり、マシンのスペックの変更をここなった際にIPが変わるので、うまく動作しなくなったんだと思います。

なので、KUSANAGIシステムのアップデートの前にマシンのスペックの変更を行うようにしました。

外部IPは固定することもできる(静的外部 IP アドレス)ので、インスタンスを作成した際に切り替えてしまうのが正しいやり方なのだと思います。

最後に、無事wordpressを立ち上げることができたのですが、SSLがどうもうまく動作してないようで、httpsでアクセスしようとすると、怪しいサイトとブラウザーに警告文が表示されました。これはもう一度SSLを設定するコマンドを実行するとうまく動作するようになりました。

kusanagi ssl --email 任意のメールアドレス

ここまで、進めて有料のマシーンを使っていたり、イメージも有料で数円の初期費用はかかってしまいました(笑)
継続にも、一定の量以上・場所のアクセスは有料なので少しは費用がかかってきそうです。この辺は様子を見ていきたいと思います。

MW WP Form で通知メールに添付ファイルを送らない方法

By | WordPress
WordPressで問い合わせフォームのプラグインでは、「Contact Form 7」 が使われると思うのですが、標準では確認ページや完了画面ページがありません。手を加えれば対応することも可能ですが、確認や完了が必要な場合には「MW WP Form」を利用させていただくことが多いです。 「MW WP Form」には標準で、確認ページや完了画面ページの設定がありそれに加え、フォームに入力された内容をデーターベースに保存する機能も備わっています。 今回、フォームの項目にファイル投稿の項目を追記したのですが、フォームで問い合わせがあった際に送られる管理者宛のメールには外しデーターベースには登録するようにしたいとの要望をいただき対応したので、この方法をご紹介します。 管理者宛のメール内容の編集方法は、「MW WP Form」公式のマニュアルに記載されています。この他にも使い方やカスタマイズに関して詳しく書かれているので困った時には、ここを確認されることをお勧めします。この中で、変数のサンプルコードをみると
/**
 * my_mail
 * @param MW_WP_Form_Mail $Mail_raw
 * @param array $values
 * @param MW_WP_Form_Data $Data
 */
function my_mail( $Mail_raw, $values, $Data ) {
    // to, cc, bcc では {キー} は使用できません。
    // $Data->get( 'hoge' ) で送信されたデータが取得できます。
    $Mail_raw->from = 'hoge@example.jp'; // 送信元を変更
    $Mail_raw->sender = 'hoge'; // 送信者を変更
    $Mail_raw->subject = {お名前}様からの問い合わせ; // 件名を変更
    $Mail_raw->body = '{問い合わせ内容}'; // 本文を変更
    return $Mail_raw;
}
add_filter( 'mwform_admin_mail_raw_mw-wp-form-xxx', 'my_mail', 10, 3 );
とのことで、bodyにファイル項目の{キー} を入れなければいいのかと思ってやったのですが、うまくいきせんでした。本文じゃなく添付ファイルとして扱われているのかな?と次にsubjectやbodyのように項目がないかプラグインのソースコードを眺めていると「attachments」というのがそれっぽいのでこれを空にして見ます。
/**
 * my_mail
 * @param MW_WP_Form_Mail $Mail_raw
 * @param array $values
 * @param MW_WP_Form_Data $Data
 */
function my_mail( $Mail_raw, $values, $Data ) {
    $Mail_raw->attachments = ''; // 添付ファイルを変更    return $Mail_raw;
}
add_filter( 'mwform_admin_mail_raw_mw-wp-form-xxx', 'my_mail', 10, 3 );
これでうまく、管理者宛のメールにはファイルは送られず、データーベースに登録されるようになりました。

アイキャッチ画像が設定されて無い時は、共通画像を設定する【WordPress】

By | WordPress, カスタマイズ, ホームページ制作

WordPressには、1つ一つの記事にアイキャッチ画像を1つ設定することができます。設定したアイキャッチ画像は、投稿した記事を一覧表示した際の見出し画像としてや、記事詳細のトップ画像などとして使えば、記事を目立たせることが出来ます。

アイキャッチ画像の設定がされてない場合、デフォルトでは空になり何も表示されず、間抜けな見た目になってしまうので、アイキャッチ画像の設定がない場合には、任意の画像が表示されるようにします。

一番簡単な方法はアイキャッチ画像を表示するプログラムにアイキャッチ画像がない場合の処理を追加します。

<?php
	if (has_post_thumbnail() )  {
		//アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得。
		$size = 'medium'; //thumbnail medium large full
		$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $size);
		//URLを返す
		$image_url = $image_url[0];
	} else {
		//アイキャッチがない場合は代替画像を表示。
		$image_url = 'https://placehold.jp/310x200.png';
	}
?>

これで、アイキャッチ画像の設定を忘れた場合にでも、設定した画像が表示され見た目が統一されます。

ただ、これだとアイキャッチを使用するところすべてにプログラムを記述する必要があり、一から作るん場合にはいいのですが、既存のサイトに後で追加する場合などは、修正抜けなどが起こる可能性があります。なのでfunctionで新規投稿の際に、アイキャッチにデフォルトの画像が設定されるようにします。

function default_thumbnail( $post_id ) {
    $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
    $default_thumbnail_id = '5044';// 画像のポストIDを指定
    if ( !wp_is_post_revision( $post_id ) ) {
        if ( empty( $post_thumbnail ) ) {
            update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = $default_thumbnail_id );
        }
    }
}

add_action( 'save_post', 'default_thumbnail' );

画像のidはメディアの一覧から指定したい画像の「添付ファイルの詳細」を開いた時のURLの「item=」横に記載されている数字になります。

最終的には、設定項目を管理画面に追加しそこで設定した画像が反映されるように制作すると後で画像の変更なども出来て快適にサイト運営を行うことが出来ます。

wordpress

wordpressのビジュアルエディターとテキストエディターの切り替え

By | その他

wordpressの投稿画面にはビジュアルとテキストの二つの編集モードが用意されています。 ビジュアルはTinyMCEというライブラリーが使われHTMLやCSSといったホームページ編集の知識がなくても簡単にページが作成できるように、ワードのような作成を補助する機能が、アイコンなどでわかりやすく用意されています。一方テキストはHTMLのソースコードをそのまま入力できより複雑で本格的なページを作成することができます。

それぞれ用途や編集能力によって使い分けができとても便利なのですが、ビジュアル・テキストで切り替えた場合TinyMCEとwordpressの自動整形で意図してない形に変換され崩れてしまいます。ビジュアルエディターの機能を外すことも出るのですが、クライアントは当然HTMLやCSSに不慣れな方が多いので好ましくありません。なので自動整形機能の一部を無効化します。

function override_mce_options( $editex_array ) {
    global $allowedposttags;

    $editex_array['valid_elements']          = '*[*]';
    $editex_array['ç'] = '*[*]';
    $editex_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
    $editex_array['indent']                  = true;
    $editex_array['wpautop']                 = false;
    $editex_array['force_p_newlines']        = false;

    return $editex_array;
}

add_filter( 'tiny_mce_before_init', 'override_mce_options' );

「valid_elements」「extended_valid_elements」で不正なコードとして削除されないものを設定します。上のコードでは*で全て保存されるようにしています。「valid_children」は親要素と要素の関係性を制御します。通常インライン要素の中にはブロックレベル要素を配置しないと言うルールがあるのですが、インライン要素であるaタグの中にブロックレベル要素を配置することがあります、この場合タグがブロックレベル要素の内側に配置し直されるのですが、これをしないようするように書いています。「wpautop」、「force_p_newlines」で段落の制御を無効に設定しています。これで影響は少なくなります。ただ完璧ではないので、切り替えを行う場合には気をつけてください。

WordPressで自動挿入される<p><br>をプラグインを使わずに無効(消す)方法

WordPressで自動挿入される<p><br>をプラグインを使わずに無効(消す)方法

By | WordPress

wordpressでサイトする際に一旦、HTMLソースコードだけでCSSなどの調整をしそのあとでwordpressの固定ページに反映し、必要プログラムを加えて調整していきます。しかし、固定ページへHTMLコードを反映し確認すると、行間やオブジェクトの間隔がずれることがあります。ソースコードを確認すると、入れたはずのない<p>や<br>が挿入されています。WordPressには自動整形機能と言って入力を補助してくれるとてもありがたく迷惑な機能があり、これのおかげでWordPressで<p><br>のタグを自動的に挿入されてしまいます。配置はすでに調整しているので、今更<p><br>を操作されれても迷惑なのででこれを無効にする方法を紹介します。

プラグインでの対応をよく見かけるのですが、何年も更新されずうまく動作しないものや、使うと別の不具合が出るものなどうまくいきません。

有名なもので「TinyMCE Advanced」がよく紹介されていますがどうも挿入じゃなく削除される対策のようで違うみたいです。ただ、プラグインをつかわくても簡単に対応することができます。

pege.phpなどのテンプレートで管理画面で入力したページの情報を出力する。

<?php the_content(); ?>

の前に自動形成を排除するフィルターを追加し

<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content(); ?>

と書くだけです。

機能自体が必要ない全体的に自動形成せずに出力したい場合は、functions.phpに次の一行を追加するだけです。

remove_filter('the_content', 'wpautop');