ショウジンブログ

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のデフォルトの挙動です。(画像…

指定カテゴリのみn件表示するループ(表示している記事は除く)@WordPress

指定したカテゴリへの投稿をn件表示するループです。 表示している記事は除きます。(よく見かける、投稿の最後にその投稿と同じカテゴリの他の投稿を表示する、あれです) コード内にはカスタムフィールドで登録したアイキャッチ画像を出力する記述がありま…

A Problem Using the Shared Laundry Machine

Although I got home earlier than usual today to do the laundry and to do the ironing, our laundry machine is full of my other housemate's clothes. I hoped that my housemate notices it and opens the laundry machine. I just want to do my lau…

カスタム投稿においてデフォルトのカテゴリを設定する@WordPress

カスタム投稿におけるデフォルトのカテゴリを指定する例です。 デフォルトの「投稿」で同様のことをするのはこちらになります。 blog.showzine.co 以下、コードです。利用しているテーマのfunctions.phpに記述します。 カスタム投稿タイプが「news」 カスタ…

管理画面で設定変更が出来ない@WordPress

WordPressの管理画面でプラグインの設定を変更(保存)しようとしたら出来ず、すんごく焦りました。 最初はそのちょっと前にしたWordPressのアップデートかなとか、不安になりながら検証してたんですが、たまたま検索でヒットした記事のおかげで原因がわかり…

ジーニアスバー(銀座 - Apple Store)にお世話になりました

けっこう最近に買った(買い換えた)iPhone 6 Plusで電話による通話が出来なくなってしまったのでジーニアスバー@銀座(Apple Store)に行ってきました。 着信はするんですが、通話状態になると双方の声が聞こえないんですね。FaceTimeに切り替えると通話出…

三兵酒店@北池袋

友人に教わって、先日行ってきました。池袋北口にある立ち飲み「三兵酒店(さんぺいさけてん)」へ。 実は、その前に一度行ったのですが、あまりに渋さにひるんでしまい(そもそも私はひとりで外食が苦手)外観を見ただけだったのです。 最近はその友人の影…

ページのスラッグを取得して出力する@WordPress

上記は固定ページの例。 この固定ページのスラッグは「jp」で、これを取得して出力するには以下のコードを使う。 post_name ); ?> リンクURLに含む必要がある場合等、使えます。 *親子関係を持つ場合、その親のスラッグはこのやり方では取得できないので注…

ページタイトルをループ外で出力する@WordPress

WordPressでページタイトルをループ外で出力するのにテンプレートの判別(テンプレートによって内容を出し分ける)も加えた例です。 ページタイトルをループ外で(例えばheader.php内で)表示する テンプレートごとに条件分岐させて出力内容を変える 上記の…

Air Conditioner for our health

I guess I might have caught a cold. Mmmmm, I think it could be because of the air conditioner. It's getting hot and humid recently, so we started using the air conditioner in our office. Although the air conditioner is very helpful, it's n…

ユーザーの種類と権限によって表示を分ける@WordPress

WordPressサイトにログインしているユーザーの種類によって表示するものを分ける例です。 使いどころとしては、複数人で運用しているWordPressサイトがあって、その投稿やユーザー情報の変更へのリンクを表示(指定する対象に対してのみ)するとか、頻度は多…

ログイン状態かどうかを判別する@WordPress

WordPressサイトで登録ユーザーがログインしているか否かを判別して表示を出し分ける例です。 ちょっとした限定コンテンツ、例えば登録ユーザーだけに内容を公開したいような場合には、プラグインを使うこともなく、これでも十分に対応できます。(サイトの…

Rainy Season

Now it's the rainy season in Japan, which lasts about one month. Today it's still raining, and we can feel a little cold. It is also humid in this season in Japan. Many Japanese people doesn't really like this season. But it's very importa…

Speed of Beer Drinking

I drank with my friend yesterday. It was the first time in ages. My friend and I drank beer. I LOVE beer, so drank six tankard of beer during about 2 hours. My friend drank only two. When he found it after the check, he was very surprised …

The Caterpillar

We removed the caterpillar from the red pepper leaf and placed it inside a box that we made. When I checked on the caterpillar this morning, it was still alive. I was a little relieved. Recently the weather had been getting hot, so I gave …

ループにget_postsを使う@WordPress

WordPressのループで表示の条件を指定する際には「query_posts()」を使うことが多いですが、これは非推奨とされていることを最近知ったので、代わりに「get_posts()」を使うようにします。 query_posts を使うことによって、ページ上のメインクエリーが置き…

Found The Criminal

We're growing some red peppers in our shared office. When I watered them I noticed that one of them was eaten by somebody. The thing is that some leaves were eaten. The leaves looked very shabby and I felt sorry for them. At first, I thoug…

Grinding My Teeth

According to my dental doctor, I grind my teeth. Many people think the reason would be stress, right? But I think that I don't have much stress recently. I can't recall. The doctor told me with a laugh: “You are sleeping when you do it.” T…

レスポンシブ対応のカルーセルスライダー「slick」@jQuery

レスポンシブWebデザインに対応したカルーセルスライダーを実現するjQueryプラグイン「slick」です。 配布元 kenwheeler.github.io 納品案件でも一度使いましたが、かなり使い勝手が良いです。 とくにブレイクポイントを指定して一度に表示するスライドの枚…

読み込んだfeedをシャッフル(ランダム表示)する@MagpieRSS

MagpieRSSで読み込んだフィードをシャッフル(ランダム表示)するにはshufful関数を使います。 WordPressでMagpieRSSを利用する場合を例にすると blog.showzine.co 上記で紹介しているコードに一行足します。 items); // シャッフル(ランダムのために必要)…

Feed(RSS等)にアイキャッチ画像を含んで配信する@WordPress

最近、あまりRSSがどうのということも言われなくなり(RSS Readerのサービス、アプリも閉鎖したりで縮小傾向にあるような)、そもそもFeedを積極的に購読している利用者も少なくなってきているかもしれませんが、私はグイグイ利用しているので一応メモしてお…