Category

ホームページ制作

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も登場

Facebookがビーコンを無料提供

By | Facebook
Facebookが米国の店舗向けにビーコンの無料提供を開始したそうです。 これは、ユーザーの現在地に合わせ情報を通知する「Place Tips」の利用拡大が目的のようです。 今いる場所の有益な情報が調べなくても提供されるのは便利そうです。 実際のリアルの行動解析されるわけで少し気持ち悪い気もしますが、そう思えば位置情報の提供を切れば情報の通知がなくなる代わりに、それから解放されます。 googleやappleもにたような位置に合わせ情報を提供するサービスを提供していて、今後さらにリアルとネットが近くなってきそうです。 ホットペッパーやぐるなびなども同じサービスを提供しても良さそうですね。 ぐるなびは、ぐるなびタッチというサービスをやってるけどこの端末改良して同様のサービスやらないのかな? ◯参考 Facebook、「Place Tips」の展開を拡大--米国でビーコンを無料提供 - CNET Japan http://bit.ly/1FV6X7S ニュースフィード上の新機能「Place Tips」のご紹介 | Facebookニュースルーム http://bit.ly/1MUQGVo Google で、できること http://bit.ly/1fbfNYO iOS:Passbook の使用 - Apple サポート http://apple.co/1cVgCDk