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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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