Category

ホームページ制作

アイキャッチ画像が設定されて無い時は、共通画像を設定する【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=」横に記載されている数字になります。

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

新しいストリートビュー認定機材について

By | サービス, その他

googleがストリートビュー制作に関する機材に4つの分類を新しく設けたようです。→Create your own Street View imagery with new 360 cameras今後発売される製品で該当するものには該当するものが表記されるようです。内容を見ると2017年には20台の360度撮影できるカメラが市場に登場するんですね。

以下4つの規格に分類されます。

Street View mobile ready

スマホなどのモバイル端末でストリートビューの公開までできるものがこれに該当するようです。

【掲載されているメーカ】

  • Giroptic
  • NCTech Ltd
  • 360Fly
  • KenXen

Street View auto ready

自動車や自転車での撮影もできる高速で精度の高い撮影が可能なもの。

【掲載されているメーカ】

  • Sphericam
  • Z CAM
  • Insta360
  • NCTech Ltd

Street View vr ready

360度画像だけではなく空間の情報も収集できるもの

【掲載されているメーカ】

  • MAtterport
  • NCTech Ltd
  • InsideMaps

Street View workflow ready

ストリートビューの編集ツールなど

【掲載されているメーカ】

  • Samsung
  • Gopro
  • HumanEyes Tech
  • iGuide
  • GoThru
  • Garden Gnome
  • Panoskin/LCP360

現状対応機材として掲載されてるRICOHの名前がないんですね。年内に4K対応した次世代THETAが販売されると発表がありましたが、どうなんですかね?分類としては「Street View mobile ready」が該当すると思うんですが、気になります。

※google翻訳を使って内容を確認しているので、誤認識している部分があるかもしれません。

サーバーのphp情報を確認し必要に応じて変更する

By | その他, ホームページ制作

サーバーからサーバーへサイト移行する際に、よくアップロードサイズ制限に引っかかりデータを復元できない時があります。 たいたい2Mくらいで制限がかかっており、サイトで記事や画像を投稿する場合には特に問題はないのですが、サイトのバックアップデータは10M以上になることもあります。大抵はPHPの設定を変更し制限の上限を一時的に上げ対応します。

まず、最初に現在のPHPの設定がどのようになっているかPHP情報を取得します。取得するためには「phpinfo.php」など適当な名前のPHPファイルを作成し、以下のスクリプトを1行記載し保存。わかりやすいようにサイトの一番上にFTPソフトでアップロードします。

<?php phpinfo();?>

ブラウザーでファイルにアクセスします。サイトの一番上にアップロードされていれば「http://サイト名/phphinfo.php」または「https://サイト名/phphinfo.php」にアクセスすると以下のような画面が表示されると思います。

「post_max_size」「upload_max_filesize」の値がアップロードに関する値なのでここの値を変更します。 方法は、サーバーの仕様によって設定方法が異なることがあるので、詳しくはお使いのサーバー仕様を確認してください。 よくある方法は、「PHP.ini」というファイルを作成し、以下の内容を記入し保存します。

post_max_size = 15M
upload_max_filesize = 15M

ここではそれぞれ、上限を15Mに設定してます。この15Mの値を必要に応じ変更してください。保存した「PHP.ini」をFTPソフトを使ってアップロードします。「PHP.ini」が置かれたところ以下に設定内容が反映されるので、これもサイトの一番上におきます。

先ほどの「phphinfo.php」をブラウザーでもう一度開き、値が変更されていることを確認します。変更されていいれば成功です。データの復元などの作業が済んだら、「phphinfo.php」「PHP.ini」共に必要ないので削除してください。

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');

さくらVPSにSSHで接続する

By | WEBサーバー

普段はVPSを自分で構築することはないのですが、さくらのVPSを以前構築したことがあり、操作は管理画面に用意されているコンソールを使っていたのですが、コピーやペーストなど色々面倒なのでMacのターミナルで接続し作業できるようにしたので覚書です。

サーバー側の設定

サーバー側の設定を行います。コンソールでサーバーにアクセスしsshで接続するユーザーのホームディレクトリに.sshのディレクトリを作成します。アクセス権限を変更します。

$ mkdir .ssh
$ chmod 700 .ssh 

700は所有者には読み・書き・実行を許可。

sshの鍵を作成する

作った「.ssh」の中に移動して鍵を作成します。

$ .ssh
$ ssh-keygen -t rsa
・・・・

Enter passphrase (empty for no passphrase): ←パスフレーズを入力
Enter same passphrase again: ←もう一度同じパスフレーズを入力
・・・・

ファイル名とアクセス権限を変更します。

$ mv id_rsa.pub authorized_keys
$ chmod 600 authorized_keys

Macに鍵を設置

サーバーの「.ssh」に「id_rsa.pub」と一緒に「id_rsa」というファイルも作成されているのでこれを「vi」コマンドで開いて内容をコピーしテキストエディターで新しいファイルを作成しペーストしておきます。

$ vi id_rsa

Macのユーザーディレクトリ内にある「.ssh」ディレクトリ内にこれを保存します。ファイル名はなんでもいいです。

SSH接続の設定変更

またコンソールに戻りユーザーを「root」に切り替え、SSH接続の設定ファイルを編集します。

$ su -
$ vi /etc/ssh/sshd_config

【編集内容】
○SSH接続のに使用するportの設定
#Port22 → Port○○○
○rootユーザでのログインの無効
#PermitRootLogin yes → PermitRootLogin no
○パスワード認証の無効
PasswordAuthentication yes → PasswordAuthentication no

設定が終わったらこれを保存して、設定内容の読み込みを行います。


$ /etc/rc.d/init.d/sshd reload

うまく接続できないとき

あとは、ターミナルでssh接続する際に設定した鍵とポートを指定し接続すれば接続できます。ssh接続がうまく行かないとき(Permission denied (publickey,gssapi-keyex,gssapi-with-mic). などエラーが出るとき)はターミナルの「ssh」コマンド入力の際に「-v」を追記すると接続の状況を確認できるので、その内容を調べると解決できると思います。

英単語の簡単な入力方法

By | その他

サイト制作時にページ名やHTML内のclassやid名にその箇所に関連する英単語をつけるのですが、昔から英語が苦手なのでよくスペルをMacOS標準で付いてる辞書やgoogle翻訳サイトなどのお世話になっています。

度々調べるのでそれだけ無駄な時間を過ごしていたのですが、簡単に英単語を入力する方法がありました。
入力したい英単語を読みを入力するだけ!スペースキーで変換項目を見ていくと英単語が変換項目にあるので選ぶだけです。

ブラウザー 変換候補を見ていくと・・・browser
リクルート 変換候補を見ていくと・・・recruit
ポジション 変換候補を見ていくと・・・position
ホームページ 変換候補を見ていくと・・・home page

おー!楽だ!!これで調べなくて済む!

前から、マックなどでMacintoshが変換候補に出てるのは知っていましたが、スペルが出るようになっているのは知りませんでした。いつから出来るようになったんだろ?これで少しは作業が楽になりそうです。

Adobe Creative Cloudメジャーアップデート

By | ソフト・ツール
こんにちは、たけしです。 いつもお世話になっているアドビのディスクトップアプリがメジャーアップデートされました。 不具合や互換性の問題などあるかもしれませんが、気合と根性で乗り切れると思うので早速アップデート中です! ハードディスクの空き容量が少ないのでそこが何より心配です・・・・。 プレスのないようによると今回のアップデートに合わせAdobe Stockというサービスの提供が開始されるそうです。 【プレスリリース】アドビ、全世界に向けて Adobe Stock の提供を開始 Adobe Stockは4,000万点のロイヤリティフリーの写真素材やイラスト、ベクター画像を提供するストックフォトサービスで、今後は動画などのコンテンツも配布する予定で、画像単品が1,180円と10点の画像を3,480円/月(年間契約、Creative Cloudユーザーの特別価格)、750点の画像を2万4,980円/月(年間契約)のプランがあるそうです。 特徴は、ソフトから簡単に素材を呼び出せ購入できることで、とりあえず透かし入りの画像で仮作成して、問題がなければその画像を購入し納品という流れがスムーズに行えるそうです。 各ソフト色々機能追加されているようで、色々楽しみです。 【プレスリリース】Adobe Creative Cloudのデスクトップとモバイルアプリにかつてない革新と連携を実現、新サービスAdobe Stockも登場