サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
kotori-blog.com
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき 意外と出番が多い「カテゴリ毎の記事一覧」を表示するタグを紹介します。 プラグインとかは使いません。 コード書くだけでいけます。 カテゴリ毎の記事一覧を表示するコード 細かい話はどうでも良いと思うので取りあえずコード載せます。 <?php $categories = get_categories(); foreach($categories as $category) : ?> <div><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></div> <u
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき WordPressで絞り込み検索の機能を実現させるとしたら、みなさんどうしますか? 普通はまずプラグインで手っ取り早くできないかと考えるかと思います。 プラグインで考えると真っ先に挙がるのが『Custom Fields Search』です。 この『Custom Fields Search』のいい所は無料という点です。 絞り込み検索を実装するプラグインの中で実用的かつ無料なのは『Custom Fields Search』くらいではないでしょうか。 『Custom Fields Search』は余りおススメできない しかし、『Custom Fields Search』は余りおススメできません。 理由としては以下
Google Maps JavaScript API v3を使用してサイトに埋め込むGoogleMapsの色をお好みの色に変更する方法を紹介します。 こんな感じでGoogleMapsの色をちょっと変更するだけでGoogleMapsとサイト全体の色のバランスを保つことができたりします。 ということでGoogleMapsの色を変更する方法を紹介します。 Google Maps JavaScript API v3を使用します。 GoogleMapsの色を変更する手順 まずGoogleMapsの色を好みの色に調整しAPIで表示するためのコードを取得します。 その色を調整するツールがこれ。 Styled Maps Wizard しかし、この「Styled Maps Wizard」はかなり細かく地図の色を編集できるみたいなのですが、UIが分かりずら過ぎてしかも英語なので使い方がいまいちよく分からないの
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがきが若干ながいので必要なければ飛ばしてください。 次項:マルチサイトでも『Custom Post Type Permalinks』の「wp_get_archives()」を正常に機能させる まえがき カスタム投稿タイプを一つのコンテンツとして利用する場合、必ずと言っていいほど必要になってくる『Custom Post Type Permalinks』というプラグインがあります。 主な機能としては「wp_get_archives()」関数でカスタム投稿タイプ別の月別アーカイブリストを表示できるようになったり、タクソノミーのアーカイブページのパーマリンクをいい感じに最適化してくれたりします。 『Custom Post
まえがき WordPressを普通にマルチサイト化すると何故か親サイトのURLに「/blog」が付きます。 これ始めてWordPressをマルチサイト化した時なんか絶対に躓くところですね。 URLに勝手に「/blog」付くのなんて明らかに不要なのになんでこんな仕様なんでしょうか。 そんなことを言っても始まりませんので親サイトのURLから「/blog」を葬り去る方法を書いていこうと思います。 親サイトのURLから「/blog」を消す手順 1.親サイトのパーマリンク設定をデフォルトに まず、親サイトの管理画面を開きます。 親サイトの管理画面上の「設定」→「パーマリンク設定」から一旦パーマリンク設定をデフォルトにします。 2.ネットワーク管理者の管理画面から親サイトのパーマリンク設定を変更 次にネットワーク管理者の管理画面から、勝手に「/blog」が付いてしまう親サイトのパーマリンクを修正します
WordPressの更新ボタンをクリックすると403エラーが表示される場合、サーバーのセキュリティ機能「WAF(ウェブアプリケーションファイアウォール)」を疑いましょう。 まえがき みなさん、WAF(ウェブアプリケーションファイアウォール)ご存じですか? 2012年の中盤くらいからロリポップやヘテムル等で導入され始めたWebアプリケーション上の脆弱性をカバーする機能です。 KoToRiはセキュリティ関係はサッパリなのでWAFについて詳しく解説することはできませんが、このWAFは重大な欠点があります! WAFを有効にしているとWordPressの管理画面上で記事の更新、及びテンプレートの更新を行うと403エラーが出ます。 WordPressを使っていて403エラーが出る場合、まずWAFを疑いましょう。 WAF出始めの頃から、この欠点はいろんなブログで紹介されていてKoToRiも当初から知って
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき みなさん、WordPressの投稿記事の抜粋を表示する時はどうしてますか? WordPress標準で用意されている「the_excerpt()」を使用するという方も多いのではないでしょうか。 「the_excerpt()」を簡単に説明します。 「the_excerpt()」は記事の抜粋を […](角括弧+三点リーダー)を最後に付けて表示します。記事編集画面の「抜粋」に何かしら入力があればそれを、入力が無ければ記事の本文から110文字(WP Multibyte Patchが有効な場合)を抜粋として出力します。 しかし、この「the_excerpt()」はそのままだと使いづらい! というのも表示する抜粋の文字数
まえがき みなさんは「iCloudキーチェーン」ご存知ですか? 悪夢のようなiPhone故障事件で本体交換になってから1日1回「セキュリティコードを使用してiCloudキーチェーンをオンにしますか?」という良く分からないポップアップが出るようになりました。 選択肢は2つで「セキュリティコードを使用」と「別のデバイスで承認」。 若干「別のデバイスで承認」が太字になっているので何となくいつも「別のデバイスで承認」をタップしていたのですが、毎日毎日このポップアップが出てくるのでいい加減調べて解決しました。 というか普通にiCloudキーチェーンを設定してあげれば良かっただけだったのですが笑 因みにiPhone故障事件の詳細を知りたい方がいればこちらからどうぞ。 iPhone5s(iOS7.0.3)がさっそく故障しました[リンゴループ] そもそもiCloudキーチェーンって何ぞ? そもそもiClo
まえがき マルチサイトのWordPressの場合、デフォルトのページ内検索だと一つのブログしか検索対象に含まれません。 デフォルトのページ内検索はformタグのaction属性に指定されているURLのブログが検索対象となります。 しかし、WordPressをマルチサイトにしている場合は全てのブログを検索対象に含めたいことが結構あるはずです。 今回はマルチサイトの全ブログを検索対象に含める方法を紹介します。 search.php(検索結果ページ)にコードを追加する方法です。 全ブログを検索対象にするためsearch.phpを編集 search.phpのループ部分を下記のように修正します。 <div>検索キーワード '<?php echo get_search_query(); ?>'</div> <?php $query_string=esc_attr($query_string); $bl
まえがき 皆さん、いきなりですがスマホサイトってどうやって作りますか? KoToRiは「viewport」をこんな感じで指定して <meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes"> 横幅640pxで作成されたデザインデータを用意してそのままコーディングします! 「viewport」に「initial-scale=0.5」を指定することで横幅640pxでコーディングしたものを50%の大きさで表示することができます。 つまり横幅320px!ちょうどiPhoneのディスプレイの幅のサイズで表示されるわけですね。 この手法だと画像もボケないし楽だし結構ベーシックなやり方だと思います。 ただ、この「v
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき KoToRiは基本的に記事を土日に書き溜めてWordPressの予約投稿を使って平日にアップするスタイルなのですが、この前いきなり予約投稿できなくなってしまいました。 アップされているはずの時間にブログを確認してみるとアップされていないので、おかしいなと思い管理画面の方を確認すると「予約投稿の失敗」という表示が。。。 こんな風に表示されるんですね。 知りませんでした。 この記事では予約投稿が失敗する原因と対処法を紹介します。 予約投稿が失敗する原因 予約投稿が失敗する原因は2つほど考えられます。 原因1 ベーシック認証 WordPressをベーシック認証下で運用している場合、予約投稿が失敗することがあるよう
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき HTML5で作られたサイトがかなり増えてきましたね。 いつ正式勧告されるんだろうとか思いながら、このKoToRiBlogもHTML5にお色直ししました。正式勧告の予定は2014年らしいのですがどうなんでしょうね。 そしてKoToRiはとうとうゲットしました。Adobe Flash Professional CC!! 最新バージョンのFlash Professional CCは、HTML5のインタラクティブコンテンツを制作できます!! ようするにHTML5のcanvas要素としてムービーを書き出せるのです。 折角KoToRiBlogもHTML5に修正したのでFlash Professional CCを使ってc
メイリオフォントの日本語はイタリック体や斜体にできません。それはメイリオというフォントが非常にこだわって作られたフォントだからだと思います。その辺のことを書きました。 まえがき みなさん。いきなりですがHTML上で文字をイタリック体や斜体にしたい時、どのようにしますか? 恐らく普通はCSSに font-style:italic; //イタリック体 や font-style:oblique; //斜体 を指定するかと思います。 しかし何故かfont-familyで「メイリオ」を指定していると日本語部分はイタリック体、または斜体になりません。 その辺のことを書いていきたいと思います。 以後この記事ではイタリック体と斜体を総じて「イタリック体」と表現します。 二つ書くの面倒なので。 何故メイリオフォントの日本語はイタリック体にできないのか 結論から書きます。 メイリオフォントの日本語をイタリック
カスタム投稿タイプとカスタムタクソノミーについてまとめました。結構詳しくまとめた(つもりな)のでこの記事を参考にすればカスタム投稿タイプを使用して基本的なことは出来るようになると思います。 まえがき カスタム投稿タイプとカスタムタクソノミーについてまとめました。 カスタム投稿タイプを使ってWordPress標準の「投稿」とは別の独立したブログコンテンツを作成する時に必要になりそうな項目をピックアップして解説します。 カスタム投稿タイプとカスタムタクソノミーを覚えるとできることの幅が格段に広がりますので抑えておいて損は無いと思います。 目次 カスタム投稿タイプとカスタムタクソノミーの概要 カスタム投稿タイプとは カスタムタクソノミーとは タームとは カスタム投稿タイプ&カスタムタクソノミーの作成 カスタム投稿タイプのパーマリンク設定 カスタム投稿タイプのテンプレートやタグ カスタム投稿タイプ
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき インストールするだけでカスタム投稿タイプのパーマリンクを個別に変更できる『Custom Post Type Permalinks』というプラグインを発見しました。 Custom Post Type Permalinks 『Custom Post Type Permalinks』はカスタム投稿タイプのパーマリンクを個別に変更できるだけでなく他にもいいことがあります。 いきなりですがカスタムタクソノミーのアーカイブページのURLに違和感を感じたことはありますか? というのもカスタム投稿タイプの分類にカスタムタクソノミーを設定している場合 WordPressデフォルトの設定だとカスタムタクソノミーのアーカイブペー
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき カスタム投稿タイプのカレンダーを表示したかったので「get_calendar()」を元に関数を作りました。とはいっても本当にちょっと手を加えただけですが。 カレンダーを表示したい場合は基本的に「投稿」を使った方が丸く収まりますがカスタム投稿タイプを使わなければいけない場合もあるかと思います。 そんな時に参考にしてもらえればと思います。 今回紹介する方法は、functions.phpにコードを書き足すタイプの方法です。 プラグインもあるのですが、ウィジェット形式にしか対応してなかったりするのでKoToRiはfunctions.phpにコード書いた方が自由がきくかな~と思います。 カスタム投稿タイプのカレンダー
まえがき WordPressの記事を投稿する場合、「投稿」か「固定ページ」から操作しますが、この2種類以外の項目を追加することができます。これをカスタム投稿タイプを追加するというのですが、今回はその「カスタム投稿タイプ」をメチャクチャ簡単に増やせるプラグイン『Custom Post Type UI』の詳しい使い方を紹介します。 プラグインを利用しない場合はfunctions.phpにコードを追加する方法がありますがKoToRiは『Custom Post Type UI』使っちゃいます。だって簡単なんだもの! 因みに『Custom Post Type UI』はカスタム投稿タイプだけではなく「カスタムタクソノミー」の追加・編集にも対応しています。 『Custom Post Type UI』のインストール 管理画面「プラグイン」→「新規追加」の検索フォームに「Custom Post Type U
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき 先日、ある案件で 既に設置済みのWordPressがあるのにWordPressをもう一つインストールして更新箇所を2つに分けたいがヘッダーやフッターは同じものを使用したい というふざけた要望を受けました。 共通のヘッダーやフッターを別のWordPressから読み込むためphpのreadfileを3つ程使用したところページ読み込み速度がめちゃくちゃ遅くそのままだと使い物にならないという事態が発生しました。 原因は3つのreadfile関数が直列に実行されていること。 これを並列に実行するようにして対応したので、その時のプログラムを覚え書きです。 複数のreadfile関数を並列に処理する 冒頭でも述べましたが
まえがき イケてるプラグインを発見しました。その名も「future-to-publish」。なんとこのプラグインをインストール有効化すると未来の記事を表示するかしないか記事毎に選択できます。 未来の記事を表示するとなると、通常はWordPressのコアファイルを編集するのが一般的でしたがコアファイルを編集するとWordPressをバージョンアップした際にもう一度修正しないといけないというデメリットがありました。しかしこのプラグインを使用すればWordPressのコアファイルを編集する必要がないのでWordPressのアップグレードも問題ありません。しかも記事ごとに表示するかどうか選択できるので便利です。 2014年6月5日追記 因みに個別ではなく全ての未来の記事を表示させる場合は下記を参考にしてください。 未来の記事を表示させる[WordPress] 未来の記事を表示するか選択できるチェッ
まえがき お問い合わせフォームを共用SSLで動かしたい場合、いろいろ面倒です。 WordPressのプラグイン「ContactForm7」を使いたいのか、その他のプログラム(AjaxMail等)でもよいのかで方法が変わってきます。 基本的にマルチサイト化されていると、共用SSLで「ContactForm7」を使用することは出来ないとされていますが KoToRiが色々調べた結果、 マルチサイト化していてもサーバーによっては共用SSL上で「ContactForm7」を使用できます。 現にKoToRiBlogのロリポップはマルチサイト化したWordPressで共用SSL上で「ContactForm7」を使用することが出来ました。 しかし、何故か別のアカウントのロリポップでは使用できませんでした。 また、さくらインターネットでは使用できたりとサーバーによって変わってくるようです。 仮に「Conta
まえがき WordPress.com公式プラグイン『Jetpack』がいつの間にかGoogle+ページとの連携に対応していました。 これでtwitterやfacebook等の主要ソーシャルメディアとWordPressの連携を一つのプラグインで行うということが可能になりました。 かなりテンションが上がりました。 なのでFacebookページとWordPressの『Jetpack』を使用した連携方法も解説していきたいと思います笑 『Jetpack』を利用した他のソーシャルメディア連携はこちら Google+ページとWordPressを連携させる[Jetpack] TwitterとWordPressを連携させる[Jetpack] 『Jetpack』のインストール方法 インストール方法は以前記事にした「Google+ページとWordPressを連携させる[Jetpack]」に詳しく書きました。 そ
WordPress.com公式プラグイン『Jetpack』でgoogle+ページとWordPressを連携させる方法を紹介します。不安定な「HootSuite」を利用するよりFacebookページやtwitterとも連携できる「Jetpack」を使用すべきです。さすが公式プラグインです。 まえがき 大分Google+広まってきましたね。有名なブロガーさんたちも結構利用しているようです。このKoToRiBlogも一応Google+ページあります。そこで問題になるのがGoogle+とWordPressの連携ですね。ちょっと前までは「HootSuite」というサービスを利用してRSS経由でGoogle+ページを更新する方法を取っていましたが、もっとイケてる方法を紹介します。『Jetpack』というプラグインを使用します。 バージョンは2.7を使用します。 『Jetpack』を利用した他のソーシャ
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき 最近は「ie6 no more」のようなIE6撲滅キャンペーン等でIE6も大方死んできましたがちょっと前はホントにウザかったですよね。 KoToRiはハック用にcssファイルをいちいち設けて「* html hoge { color: red; }」とか書いてましたよ。 Chromeのハックだけいくら検索して試しても全然効かなくて困ったこともありました。 懐かしい。。。 その頃に『CSS Browser Selector』を知っていればと思うと悔やんでも悔やみきれません笑 しかも『CSS Browser Selector』はブラウザ毎だけではなくOS毎にcssを書けるのでiPhoneのみとかiPadのみとかも
まえがき WordPressのカテゴリに画像を登録して表示したい時があると思います。 そんな時、KoToRiは『Advanced Custom Fields』というプラグインを使用し、カテゴリに画像をアップロードできるカスタムフィールドを作成します。 正直、WordPressのカスタムフィールドのプラグインは『Custom Field Template』一択なのですが、『Custom Field Template』はカテゴリにカスタムフィールドを作成できません。なのでカテゴリにカスタムフィールドを設定したい場合だけ『Advanced Custom Fields』を『Custom Field Template』と平行して使用します。 記事にカスタムフィールドを追加するだけなら『Custom Field Template』を使用すれば十分かと思います。 Custom Field Templat
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 説明書は読まないタイプの人は 自動でスライド!フリック操作も可能なスマホ用横スクロール画像ギャラリーのデモ からデモ見るかファイルダウンロードしてください。 まえがき 昨今スマートフォンが普及するにつれてスマートフォンサイトの案件が増えてきています。 スマートフォンサイトでもやっぱりトップページに画像ギャラリーを設置したいという要望は多いですね。 この前、クライアントからこんな要望を受けました。 「横スクロール型の画像ギャラリーでフリック操作可能なものを設置したい。あっあと自動再生も!」 必死に探したんですがまぁ見つからない。横スクロール型の画像ギャラリーはたくさんあるけど自動再生機能が付いてない! なのでその辺から
まえがき 月別アーカイブリストを表示するタグ『wp_get_archives()』には引数に「before」と「after」が用意されていて好きな文字列をリンク文字の前後に入れることが可能ですが、カテゴリ別アーカイブリストを表示するタグ『wp_list_categories()』には何故か「before」と「after」が用意されておらず、好きな文字列を入れることが出来ません。どうしてさ!!! そんな『wp_list_categories()』ですが、function.phpにコードを追加するだけで「before」「after」と同じような設定を行うことが可能になります。 『wp_list_categories()』に「before」「after」を設定し文字列を追加する function.phpに以下のコードを追加します。 add_filter ( 'wp_list_categories
Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます! KOTORI Blogの公式キャラクター「パンD」です。 まえがき 『InsetBorder』というjqueryプラグインは画像に付けたボーダーをマウスオーバー時にアニメーションで消してくれるというものです。 言葉じゃ伝わりません。公式サイトのデモをご覧下さい。 だんだんボーダーを消してくれるのですが、これ逆の方がよくないですか? 画像をマウスオーバーしたらボーダーがだんだん表示されるって動きのほうがよくないですか?? いいですよね! 『InsetBorder』を誰かがカスタマイズしたっぽいのを見つけたのでちょっといじって公開します。 解説とかいらないからデモ見せろって人は下からどうぞ! デモ 公式サイトのデモの流用でごめんなさい笑 『InsetBorder』のjquery
まえがき WordPressをマルチサイト化した際に特定の複数のブログの新着記事を何件か表示したいということは良くあるかと思います。 例えばマルチサイト化したブログのうち、NewsブログとEventブログから新着5件を表示させたいとか。 MovableTypeだと、標準で入っている「Multiblog」プラグインでサクッと実現可能ですが、WordPressの場合そう簡単にはいきません。 いちいちphpからデータベースにアクセスして記事を引っ張ってこなきゃいけません。そのコードを紹介します。 プラグインじゃなくテンプレートにコードを書く形です。 マルチサイト化した複数のブログから新着記事を表示するコード 2013年12月10日 不要な変数代入があったのでコード修正しました。 <?php $sql = ''; $blog_id_arr = array(1,2);//取得するブログIDの配列 $
カスタムフィールドの内容を設定 次にカスタムフィールドの内容を設定していきます。 『Custom Field Template』は「テンプレートコンテンツ」のフィールドにコードを入力することで フィールドの内容を設定することが出来ます。 コードの書き方は「デフォルトテンプレート」を参考にすると分かりやすいですが基本は下のような形式です。 [KoToRifield] type = text size = 35 label = テキストフィールドだよ 「[KoToRifield]」はファイル名です。ここは半角英数で入力してください!日本語だと出力するときにコケる可能性がありますので。 「type」でフィールドのタイプを指定できます。ラジオボタンとかチェックボックスとかテキストエリアとか。。。 「label」はフィールドに説明をつけることが出来ます! 各タイプ色々オプションが用意されていますので
次のページ
このページを最初にブックマークしてみませんか?
『KoToRi Blog【コトリブログ】』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く