はてなブックマーク

まえがき タイトルが自分でも何いってんのか分からないのですが、何がいいたいかというと記事タイトルや本文に文字数制限をかけて表示する事って結構あると思います。 文字数制限かけるのにGoogle先生に聞くと結構「mb_substr()」がでてきます。 しかし、「mb_substr()」を使用して記事一覧ページとかで本文に文字数制限をかけたりすると、記事ごとに表示されてる文章の終わりの位置がバラバラで文字数が違うように見えるということが起きます。 例えばこんな感じに。 3つの文章は全て76文字で指定していますが、終わりの位置がバラバラですね。あまりきれいじゃありません。 てか、グラフィックデザイナーのクライアントに「汚い」と指摘を受けましたｗ恐い。 その時に覚えた対処法を紹介します。 文字数制限は「mb_substr()」じゃなく「mb_strimwidth()」を使用する 結論からいきます。

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき WordPressで生成したページの一部にBasic認証を掛けたいという願望を持ったことは無いですか？ 私は例えばクライアントに制作中のページを確認してもらいたい時とかに「このページだけBasic認証かけたいな」って思います。 WordPressの「パスワード保護」機能でもいいんですが、オリジナルのテーマだと設定が面倒だったりします。 でも.htaccessでBasic認証かけると、フォルダごと掛かっちゃってWordPressで生成するページ全部がBasic認証下になったりします。 そうじゃなくて個別にbasic認証掛けたいんじゃ～って時は、phpでBasic認証をかけてあげましょう。 実際に「phpでBa

まえがき みなさんphpのforeach文でこんなエラー出たことないですか？ Warning: Invalid argument supplied for foreach() in ファイルのパス KoToRiはマジで良くこのエラーだしちゃうんですよね。 その度にGoogleで検索して修正してってのをかれこれ10回くらい繰り返しているので、いい加減記事にして同じ過ちは2度と繰り返さないように対処方法を心に刻みつけたいと思います。 「Invalid argument supplied for foreach() …」エラーの原因 「Invalid argument supplied for foreach() …」エラーの原因は配列の形式ではない変数でforeach文を実行しようとしているからです。 基本に返ってforeachの解説を見てみましょう。 foreach は、配列を反復処理するた

公開日に未来の日付を設定した記事を表示させる方法を紹介します。functions.phpにコードを追加する形です。WordPressのコアファイルを編集していた人はこちらの方法の方が良いと思います。 まえがき WordPressは公開日に未来の日付を設定した記事は「予約投稿」状態となり普通は公開されません。 けど、未来のイベントとかの情報をWordPressで扱うなら未来の記事も公開したい！という事は良くあります。 そんな時、みなさんはどうしますか？ KoToRiは今まではWordPressのコアファイルを編集していました。が、コアファイルを編集するとWordPressをバージョンアップした際に元に戻ってしまい、もう一回設定しなおさなければいけません。 よろしくないですね。 function.phpにコードを書き足す形で何とかならないかな～と探していたらありました！！ この記事ではfunc

まえがき この記事ではWordPressのカスタムフィールド系プラグイン『Advanced Custom Fields』の出力にスポットを当てて解説していきたいと思います。 出力タグがAdvanced Custom Fieldsのオリジナルなので初めての人は迷うと思いますがこの記事を読めば大丈夫です。 ↓出力じゃなくて『Advanced Custom Fields』の使い方等の解説はこの記事を見てね 『Advanced Custom Fields』の使い方 コピペ用『Advanced Custom Fields』出力タグ とりあえず説明は要らないって人のためにコピペできる形でコード書いときます。 使ってね☆ <? //テキスト $txt = get_field('txt'); if($txt){ ?><p>テキスト：<? echo $txt; ?></p> <? } //テキストエリア $

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき WordPressでお問い合わせフォームを設置するプラグインといえば、真っ先にの名前が挙がるのが「Contact Form 7」でしょう。 みなさんも使用したことがあると思います。 この記事では、そんな「Contact Form 7」をより実用的に使用するカスタマイズ方法をまとめました。 ここに書いていることでフォーム周りに関する大抵のことには対応できると思います。 あと注意事項を一つ。 記事に出てくるショートコードは半角スペースを消してください。 []の前後の半角スペースです。 そのままだと展開されちゃいました。 目次 郵便番号からの住所自動入力に対応 確認用メールアドレスのフィールドを追加 確認画面を表

まえがき 以前に書いた記事「カテゴリに画像のカスタムフィールドを追加する方法[WordPress]」に「カテゴリではなくタグの場合はどうやって画像を取得すれば良いのでしょうか？」というコメントをいただいたのを「タグ」ではなく「タクソノミー」と勘違いして記事を書いてしまいました。記事の最終確認の段階で「タグじゃん！」と気づきましたが、折角書いたのでこれはこれで公開したいと思います笑 基本は「カテゴリに画像のカスタムフィールドを追加する方法」と同じで『Advanced Custom Fields』を使用しますがカスタムフィールドの値の取得の部分が若干違います。 この記事は「ムパムパ」というカスタム投稿タイプに「ムパムパカテゴリー」というカスタムタクソノミーを作成して、そこにカスタムフィールドで画像を追加し、その値を取得するという流れで解説していきます。 カスタム投稿タイプとカスタムタクソノミー

まえがき みなさん正規表現詳しいですか？ KoToRiは正規表現を見ると吐き気がします笑 拒否反応です。なぜなら正規表現は複雑すぎて本当に全く理解できないから。 リダイレクトとかで.htaccessに正規表現を書くという機会はわりと多いと思いますがKoToRiは全部コピペで乗り切ってました。 だから正規表現絡みの.htaccessがうまく動かない時は相当ハマってました笑 最近、300ページ規模のサイトを制作してるんだけどコーダーが作ったHTMLをWordPressに移植する時に「a href」のリンク先がそのまま使用できない！という状況に陥って手で一つずつ直すなんてバカなことしてられないので必死に調べました。 そして無事に正規表現を利用してラクラク置換できました。 長年忌み嫌っていた正規表現と何かちょっと歩み寄れた気がしたので記念に記事にします。 てか正規表現がよく分かんないコーダーさんと

まえがき カスタム投稿タイプのアーカイブのURLは普通こんな感じ。 “kotori-blog.com/投稿タイプ名” これに階層構造を持たせたい場合が多々あります。 例えばこんな感じ。 “kotori-blog.com/custompost/投稿タイプ名” 第三階層くらいまであるサイトだとURLの構造って大事だったりしますよね。 今までは「無理だろ」と思って諦めていましたが先日、とうとう発見しました！ そんな感じでこの記事はカスタム投稿タイプのURLに階層構造を持たせる方法を紹介します。 因みにプラグイン「Custom Post Type UI」を使用します。 使用したこと無い人は使ってみてください。 カスタム投稿やカスタムタクソノミーの追加がめっちゃ簡単にできます。 Custom Post Type UIの使い方 この記事では「Custom Post Type UI」の使い方は割愛するの

何故かWordPress側でwww有り・無しが統一されない状況に陥ってしまったので.htaccessにコードを記述してwww有り・無しが統一されるように対応しました。 まえがき 先日WordPress3.1を使用しているサイトのサブドメイン「www」の有り無しを統一する作業を行いました。 KoToRiは何故かこの手の作業に躓いちゃうのでいい加減、しっかり記事にして今後迷う事が無いようにしたいと思います。 そもそもWordPress使えば自動的に「www」の有り無しを統一してくれるんじゃないの？ そうなんです。普通は自動的にやってくれるはずなんです。最近手がけたWordPressを使用したサイトも問題なく勝手に統一されています。 www有り無しをどこで指定するかというと管理画面の「設定」→「一般」の「サイトアドレス（URL）」です。 ここに入力されたURLに統一されます。 普通なら。 Wor

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 拡大縮小しても汚くならないベクター画像をサイト上に表示できるSVGを解説します。イラレを使った書き出し方法や、サイト上に表示する方法を超具体的に紹介します。 まえがき この記事を書いてるちょっと前に、このKOTORI Blogをリニューアルしました。 どうせリニューアルするならと、サイト内のイラストは基本全てSVGで書き出そうと思い立ち無事に実現できたので、SVGをブラウザに表示するためにKoToRiが実際に行った事をまとめて記事にしたいと思います。 それから、この記事ではSVGを作成するためにAdobeのIllustratorを使用します。 IllustratorのバージョンがいくつからSVGを書き出せるようになっ

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき この前とある案件で「海外からアクセスがあったら海外用のページに飛ばしたい。でもその海外用のページから日本語ページにリンクを張って日本語のページも見れるようにしたい」という要望を受けました。 この要望を実現するために、クリアすべき点をザックリ挙げると 海外からのアクセスを判別して振り分け 海外用ページから日本語ページにアクセスされた時を判別 この2点です。2つ目はこの記事のタイトルから見れば若干蛇足ですがついでに解説していこうと思います。 海外からのアクセスを判別して振り分けるいくつかの方法 調べたところ、海外からのアクセスを判別する方法の選択肢は3つ程あるようです。 「php」で判別 「.htaccess」

まえがき この前ある案件でクライアントから「トップページの最新記事一覧に記事の中で使用されてる画像を表示させることは可能ですか。アイキャッチに登録するのが面倒なので。。。」というご要望をいただきました。。 確かに本文に絶対画像いれるのであればアイキャッチに画像を登録するの手間になりますよね。ググってみたらめちゃくちゃ簡単に対応できたので覚え書きです。 functions.phpにコードを追加する形です。 記事内の最初の画像を取得する functions.phpにコードを追加する 下記コードを使用中のテーマのfunctions.phpに追加してください。 function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_al

まえがき 以前制作したサイトをたまたまiPadで閲覧したら、一部のページが画面内に入りきらず右側が切れてしまっていました。 iPhoneでみるとピッタリ画面に収まっていたのですがiPadやiPhoneめんどくさいですね。 昔のIE6を彷彿とさせる感じでiPadやiPhone対応が面倒くさいです笑 しかし「viewport」をしっかり設定すれば簡単に直すことができましたので覚え書きとしてエントリーしておきます。 ただPC用のサイトを単純にiPadのディスプレイにピッタリ収めて表示してあげれば良いだけです。 iPadやiPhoneで右側が切れたり、余白が空いたりする現象を回避する「viewport」の記述 「viewport」の設定で表示するデバイスのディスプレイサイズに合わせてサイトをリサイズして表示することができます。 <meta name="viewport" content="widt

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 こちらの記事はWordPressで共用SSLのURL上で「ContactForm7」を動かすためのページです。 「ContactForm7」を使用したい場合は、まずお使いのサーバーやWordPressの状況で共用SSL上で「ContactForm7」が使用できるかという事を調べる必要があります。 未だ調べていない人はこちらの記事に調べる方法を書いてますのでお読みください。 WordPressでの共用SSLお問い合わせフォームのまとめ[マルチサイト] まえがきが長いので必要ない人は飛ばしてください。 『WordPress HTTPS』をインストール まえがき 以前に書いた共用SSLでのお問い合わせフォームページ設置方法

まえがき Googleアナリティクス便利ですよね！アクセス解析と言えばGoogleアナリティクスでしょう。無料だし。 ただ、KoToRiはGoogleアナリティクスでイベントを取得する「イベントトラッキング」というものがどうしてもうまくいきませんでした。 具体的に言うと、javascriptが入ったzipファイルがどのくらいダウンロードされたのか統計を取るためクリック数をカウントしたかったのですが まぁうまくいかない！ 約1か月迷った末、や～っと解決しました！！！ これ絶対他にもうまくイベント取得できなくて困っている人がいると思ったので記事にします。 自分のサイトのトラッキングコードを確認 イベントトラッキングが反映されない場合、とりあえず自分のサイトに貼ってあるアナリティクスのトラッキングコードが「非同期トラッキングコード」か「同期トラッキングコード」かを確認します。 非同期トラッキング

まえがき iPhoneやandroidは「tel」プロトコルを使用すれば、そのリンクをタップすると番号発信を行うということが可能になります。 ■具体例 <a href="tel:0012345678">電話する</a> しかし、「tel」プロトコルが指定されたリンクをPCで開こうとすると当たり前ですが開けません。 そうなると、例えばレスポンシブ対応のサイトを制作する場合、HTMLの構造は基本的にPC、スマホともに同じなので「tel」プロトコルを使用するとなるとPCにも反映されてしまいます。 困りますね。 ということで、この記事ではPCでアクセスされた時のみ「tel」プロトコルが指定されたaタグを削除する方法を紹介したいと思います。 jqueryです。 PCのみ「tel」プロトコルが指定されたaタグを削除する方法 HTMLの「tel」プロトコルの指定 HTMLの方に若干細工を施します。「te

まえがき WordPressのサイト内検索はデフォルトのままだとカスタムフィールドの値が検索対象に含まれません。基本的にカスタムフィールドは使いまくると思うので検索対象に含めてもらわないと困りますね。 そんなときに超便利なのが「Search Everything」プラグインです。 インストールしてちょっと設定いじくるだけでカスタムフィールドはもちろん、デフォルトでは対象外のコメントやタクソノミー名等を検索対象に含めることができます。 Googleカスタム検索を使用しないキーワード検索を実装するなら是非導入しておきたいプラグインですね。 この記事ではそんな「Search Everything」プラグインの使い方を説明します。 『Search Everything』のインストール 管理画面「プラグイン」→「新規追加」の検索フォームに「Search Everything」と入力し「プラグインの検