ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

ページ内遷移するとドロワーメニューが閉じない@jQuery

ハンバーガーメニュー(ドロワーメニュー)でページ内リンクをタップすると、ページ内の位置は変化するのですが、その上に展開しているメニュー(ハンバーガー)が閉じず、コンテンツが見えないという不具合に遭遇。 確認のためのデモページを用意する余裕が…

MAMPのMySQLをターミナルで操作する@MAMP

ローカル環境で開発環境を構築する際に手っ取り早く、便利なMAMP。 MAMPからでもMySQLはphpMyAdminで操作できますが、ターミナルからMySQLモニターを通して操作したい場合もあります。 その場合、普通に以下のコマンドを実行しても当然ながらMAMPのMySQLには…

カスタムフィールドの値を文字数制限して出力@WordPress

正規表現を使ったやり方 まず、以下の解説を参考にして確認してみました。 www.tinybeans.net カスタムフィールドの管理にプラグインToolset Typesを使っています。カスタムフィールドの指定部分は適宜書き換えます。

投稿本文にYoutube動画の共有URLを埋め込むカスタマイズ@WordPress

*写真は本文とは関係ありません(Oisixで購入した「ケール」とチーズのサラダです、美味しかったです) WordPressの投稿本文にYoutube動画の共有URLを記述すると、自動でiframe要素に変換され、フロント側(訪問者が閲覧する)に動画の再生ウィジェットが埋…

テキスト、またはinput要素のvalue値を指定した文字列置換(あるいは削除)@jQuery

jQueryを使った文字列置換の例です。(割愛してますが、いずれの例もjQuery本体を先に読み込む必要があります) HTML要素の文字列を対象 <script> jQuery(function() { jQuery('.name_place').each(function(){ // 対象要素を指定 var txt = jQuery(this).html(); jQ</script>…

カスタム分類のターム名(スラッグ)で条件分岐@WordPress

WordPressのカスタム分類で割り当てられているターム名(スラッグ)を判別して出力を分ける例です。single.phpで使用します。 以下の例ではカスタム分類で「seminar-type」というものが存在し、これに「brown-pickles」というスラッグが割り当てられている場…

Vimのセットアップ

Vim

XSERVERでsshによる接続が出来るようになり、Vimをインストールしました。 が、このままでは私が普段使う環境にないのです。 例えば私は「:E」を使ってファイラー機能を多用するのですが、インストールしたデフォルトの状態ではこの機能は使えません。 *Vi…

Vimをインストール@XSERVER

GUIを必要としない(マウス操作が不要でキーボードのみで操作できる)高機能なテキストエディタ「Vim」をXSERVERで使えるようにします。 Vim - ウィキペディア https://ja.wikipedia.org/wiki/Vim Vimのソースをダウンロード リポジトリをみて最新版を確認し…

sshでXSERVERに接続する@XSERVER

XSERVERにSSHで接続しファイル等の操作をします。 私の場合、開発速度向上の意味でもサーバー上のファイルを直接編集することが多いので、SSHで接続し、Vimを使ってファイル編集をします。 *この例ではMac OSXのターミナルを使用してコマンドによる操作を行…

無料で独自SSLを導入する@XSERVER

レンタルサーバー「XSERVER」で独自SSLが無料で提供されるようになったので導入してみました。 GoogleがWebサイトのSSL暗号化通信に対応しているか(httpsプロトコルによる通信)を検索順位の評価対象にするという発表もありますので、これまでは費用面で見…

WordPressでhttpsプロトコル通信(独自SSL)を有効にする@WordPress

WordPressでコーポレートサイト等を運用している場合は独自SSLを導入したらWordPressサイト全体も暗号化通信(httpsプロトコルによる)に対応したほうがいいと思いますが、たんにブログだけで利用しているような場合には必ずしも必要ではないかもしれません…

検索機能をつける@WordPress

WordPressに検索機能をつけるのはわりと簡単です。(満たす要件によりますが) とくにデフォルトで用意されているものを使うのであれば以下のタグを検索フォームを表示したい場所(テンプレート)に記述すれば、フォームの窓と検索ボタンが出力されます。 …

ループ内でカスタム投稿タイプを判別して出力を分ける@WordPress

WordPressのループ内で投稿タイプを判別して出力を出し分ける例です。 例えば、投稿タイプごとに見出しにそれとわかるアイコン画像を表示したいとか、特定の文字列を表示したいとか。 ようするに、指定した投稿タイプごとに出力を分けたい場合に使えます。 …

アイキャッチがあるかないかを判別する@WordPress

WordPressのアイキャッチ画像を使う場合、アイキャッチ画像が存在(投稿に登録されているか)するか否かを判別する条件文の例です。 the_post_thumbnail() 関数を使います。 アイキャッチ画像がない場合には代替画像を指定して出力するようになっています。 …

投稿タイプを指定して出力を分ける条件文@WordPress

WordPressの投稿タイプを指定して出力を出し分ける条件文の例です。 投稿タイプごとにsingle.phpを分けて(single-◯◯◯.php)おけば不要ですが、single.phpだけでデフォルト投稿、カスタム投稿を表示する場合にはsingleテンプレート内で以下のような条件文を…

原因と結果の法則、を読んで

映画「SWITCH」予告編 先日参加したドキュメンタリー映画の上映会と講演、演奏会が一緒になった『SWITCH』で知ったジェームズ・アレンの『「原因」と「結果」の法則』を読みました。 Amazonのマーケットプレイスで中古にしようか数秒迷ったんですが、K…

さまざまな条件分岐@WordPress

フロントページを指定 <p class="display_current"> <small>フロントページです。</small> <small>フロントページ以外です。</small> </p> この例では is_home() を使っていますが、これはWordPressサイトの設定で「表示設定>フロントページの表示」が「最新の投稿」に設定されている場合です。 フロントページに固定ペ…

固定ページの親ページを判別して条件分岐(出力を分ける)@WordPress

WordPressの固定ページで親子関係を持っている場合、指定した固定ページを親に持つ子ページを指定する条件文の例です。 必要となるケースはいろいろあると思いますが、私が実際に必要としたのは6言語対応の場合でした。 親に「日本語科」という固定ページ(…

Toolset Typesで画像のカスタムフィールドを使う@WordPress

WordPressの「カスタム◯◯」を便利、手軽に実装できるプラグイン「Toolset Types」について、いくつか基本的なことを公開してきましたが、画像のカスタムフィールドを使う場合にはいくつか配慮する点があるので、その点(Toolset Typesで画像のカスタムフィー…

ユーザー用カスタムフィールドを作る@WordPress

WordPressでカスタムフィールド(他にタクソノミー、ポストタイプ等も)を作るのに便利なプラグイン「Toolset Types」ですが、「ユーザーフィールド」にも対応してます。 この場合の「ユーザー」はWordPressサイトのユーザーです。(管理者や編集者、投稿者…

投稿用テンプレート(single.php)をカテゴリ別に分ける@WordPress

WordPressでは「投稿」をフロント(訪問者側)で表示するのに「single.php」を使います。 実際はテンプレート階層があるので、index.phpで表示することもあるのですが(single.phpが存在しない場合)、あんまりそれは(作ってる途中でない限り)ないかと思い…

固定ページのスラッグで判別して出力を出し分ける@WordPress

固定ページのスラッグ(URL)を判別して条件文を書き、出力する内容を出し分ける例です。 WordPressではカテゴリや投稿、固定ページなど、様々な条件を指定して出力内容を出し分けることが出来ますが、この例は固定ページになります。 上記の設定例は、固定…

カスタムフィールド(Toolset Types)の内容をメールフォーム(MW WP Form)に渡す@WordPress

カスタムフィールドに入力された値(内容)を申し込み等のメールフォームに引き渡したい場合があります。 例えば、前回作ったカスタムフィールド。 blog.showzine.co これはセミナー開催情報の詳細です。 そのセミナーに申し込みたいと訪問者が思った時に「…

カスタムフィールドをプラグイン「Toolset Types」で実装する@WordPress

WordPressプラグイン「Toolset Types」でカスタムフィールドを利用する例です。 同プラグインの導入についてはこちら blog.showzine.co 実装における環境 WordPress:4.5.2 Toolset Types:2.1 投稿用フィールドグループを作る Toolset Typesはここ最近けっ…

カスタムタクソノミー(カスタム分類)をプラグイン「Toolset Types」で実装する@WordPress

WordPressプラグイン「Toolset Types」を使用してカスタムタクソノミー(カスタム分類)を作る例です。 先日投稿した内容にあるセミナー開催情報を投稿するためのカスタム投稿タイプ「セミナー情報」に、この投稿タイプ専用のカテゴリをカスタム分類で作って…

カスタム投稿をプラグイン「Toolset Types」で実装する@WordPress

WordPressで カスタム投稿タイプ カスタムフィールド カスタムタクソノミー(カスタム分類) の作成、管理をするプラグイン「Toolset Types」の実装例です。(他にもユーザーフィールドも追加、カスタマイズできます) 全部をひとつの記事で紹介するのは長大…

スマートフォン対応のカルーセルスライダー「CarouFredSel」@jQueryプラグイン

画像のスライドショーだけでなく、コンテンツスライダーとしても使えるカルーセルスライダーのjQueryプラグイン「CarouFredSel」がとても便利だったので備忘録として残しておきます。(レスポンシブ対応でスマートフォンにも使えます) 高さが異なる要素にも…

MW WP Formで郵便番号の自動補完@WordPress

WordPressでメールフォームのプラグインMW WP Formを使い、これに郵便番号による住所の自動補完機能をつける例です。(郵便番号を入力すると、都道府県と市町村が自動で補完されます) MW WP Formの実装例はこちらを参照ください。 blog.showzine.co *日本…

MW WP Formを使ってメールフォームを作る@WordPress

MW WP Formはショートコードを記述してフォームを作成します。 フォーム画面にはHTMLを記述することができるので、フォームのデザインの自由度が高いです。 また、入力画面、確認画面、完了画面をひとつのテンプレートで完結も出来ますし、個別にページを用…

投稿本文のimg要素についているa要素に任意のclass名をつける@WordPress

投稿本文にimg要素を埋め込んだ場合につくa要素に任意のclass名をつける例です。 たとえば、サムネイルサイズ等、実際の画像サイズより小さい画像を表示していて、それをクリックすると拡大画像が表示される。これはWordPressのデフォルトの挙動です。(画像…