はてなブックマーク

前回までのあらすじ 前回の記事で、Twitter API 1.1をwordpressプラグインで済ませようとしたDAICHIFIVE。ところが、ユーザータイムラインしか取得できなかったので、結局、あきらめて自分でやることにしたのだった。 functions.php // Twitter取得 function getTwitterApi($apipath, $parameters = array()) { require_once(dirname(__FILE__)."/twitteroauth/twitteroauth.php"); $consumer_key = "xxxxxxxxxx"; $consumer_secret = "xxxxxxxxxx"; $access_token = "xxxxxxxxxx"; $access_token_secret = "xxxxxxxxxx";

小規模企業サイトを制作する際に、wordpressを選択することは多いと思います。今回は、実際に僕が制作したときの作業手順などを備忘録的に記載します。それぞれの細かいやり方は自分で調べてね。 事前準備 サイト全体の構成を把握して、どれを固定ページにするか、カスタム投稿タイプやカスタム分類は必要か、URLをどうするか、どのプラグインが必要かなどを考えておきます。 インストール MySQLデータベースを作成 最新版のwordpress本体をwordpress日本語サイトから入手 wp-config.phpを編集 ファイル一式をサーバへアップロード ブラウザからインストール画面を出す 初期ユーザを作成して管理画面へ とりあえずWP Multibyte Patchを有効化 Ultimate Maintenance Modeを入れてサイトを非公開にする wp-config.phpのパーミッションを4

追記： 個人的には今回紹介するプラグインではなく、UpdraftPlus Backupというプラグインのほうが良かったので、今はそちらを使っています。Google DriveのOAuth2.0認証などは、この記事とだいたい同じやり方です。 つい最近も、大手レンタルサーバ業者にてトラブルが発生しました。サーバ上のデータが突然すべて消えるなど、深刻なダメージがあったようです。サーバー上のデータがバックアップ含め全て消えたため、別の場所にバックアップを保存していたかどうかが明暗を分けたようです（といっても、本当に深刻なのはウェブのデータよりも、メールやグループウェアのデータだと思いますが）。というわけで今回は、wordpressサイトをGoogle Driveに自動でバックアップする方法を紹介したいと思います。 必要なもの Google Drive Backupプラグイン Imsanityプラグ

ちょっと前に、wordpressの知らないプラグインを発掘する大会をひとりで開催。wordpress Plugin Directoryとヤフー翻訳をそれぞれタブで開き、英検3級のDAICHIFIVEさん宅でしめやかに執り行なわれました。・・・で、今後、企業サイト製作時に必ず導入を検討するプラグインリストを作成。全部で13個あったのでABC順に紹介します。 Advanced Custom Fields http://wordpress.org/extend/plugins/advanced-custom-fields/ 以前、紹介記事を書きました。カスタムフィールドを劇的に使いやすくするプラグインです。カスタムフィールド系のプラグインでは文句なく最強です。 Contact Form 7 http://wordpress.org/extend/plugins/contact-form-7/ 説

wordpressのカスタムフィールドを使いやすくするプラグインは、日本語の情報が多い「Custom Field Template」や「Custom Field GUI Utility」の2つが有名です。今回紹介する海外製の「Advanced Custom Fields」は、日本語の情報こそ少ないですが、海外での評価も高く、僕も実際に使ってみたところ、非常に使いやすく感動したので紹介します。いろいろ開拓してみるもんだね。 Advanced Custom Fieldsって？ wordpressのカスタムフィールドはとっても便利です。これを使えば、「タイトル」「本文」「抜粋」以外に自由に入力項目が増やせます。「金額」「品番」「サイズ」などを追加して、商品ページをより入力しやすくする、なんてことも可能です。ただ、実際にカスタムフィールドを使ってみると分かるのですが、カスタムフィールドの入力欄がち

wordpressで、デジカメで撮影した画像をアップロードすることってありませんか？プリント用に撮影した写真は、ウェブサイトで使用するにはサイズが大きすぎます。だからといって、画像編集ソフトでリサイズするのもめんどくさい。最近のwordpressは、様々なサイズでサムネイルを自動作成してくれるけど、アップロードした元画像のサイズが大きいままだと、結局サーバー容量を圧迫してしまう・・・。 そんなあなたに、Imsanity！ 使い方 Imsanity 管理画面からプラグインを検索して自動インストール！有効化すると、「設定」→「Imsanity」という項目が表れます。 こちらの設定画面で、あらかじめ画像の最大サイズを指定しておくと、アップロード時に自動でリサイズしてくれます。 このプラグインのすごいところは、どこから画像をアップしたかによって、最大サイズを変更できる点です。例えば、投稿画面からア

WordPress SEO by Yoastとは？ WordPress SEO by Yoastは、wordpressやSEOの情報を発信している海外のサイト「Yoast」発の、総合SEOプラグインです。定番であるAll In One SEO Packと比べると、より高機能で上級者向けな印象です。 Yoast WordPress SEO by Yoast 多くの機能があり、また、設定する項目もたくさんあるのですが、詳しい日本語の情報があまりなかったので、今回、使い方を自分で調べてみました。 インストール プラグインの管理画面から検索、自動インストールして有効化します。ちなみに、執筆時点でのwordpressは3.3.1、プラグインバージョンは1.1.5です。 Dashboard まずは、全体に関する設定を行います。 Use meta keywords tag? メタキーワードタグを使いたい

Skitter Slideshowとは？ 「Skitter Slideshow」は、スライドショウを実装するjQueryプラグイン「Skitter」の、wordpressプラグイン版です。Skitterの豊富な機能・多彩なエフェクトはそのままに、wordpressの管理画面上から画像やリンクの設定ができるため、HTMLの知識のない方でもスライドショウを管理できるという大きなメリットがあります。 wordpressプラグインディレクトリのSkitter Slideshowのページはこちら Skitter本家サイトはこちら 導入方法 wordpressの管理画面から、「プラグイン」→「新規追加」で、『Skitter Slideshow』で検索すれば出てきます。「いますぐインストール」をクリックしてインストール、有効化します。 テンプレートファイルのスライドショウを表示させたい箇所に、以下のコー

2011年4月12日 wordpressで、Contact Form 7＋jQueryを使って、セレクトボックスの項目を動的に生成させる方法。 「当ブログで一番好きな記事はどれですか？」という質問を作る場合 wordpressのプラグイン「ContactForm7」は、記事内からショートコードでフォーム全体を呼び出すため、セレクトボックスの項目を動的に生成させようと思うと、Javascriptなどを使って、フォーム表示部分とは別にコードを追加する必要があります。 今回は例として、「一番好きな記事はどれですか？」という質問に対して、ブログの記事タイトル一覧から選択できるようなフォームを作る方法を説明します。 ContactForm7側の設定 ContactForm7の設定画面で、とりあえず、フォーム内にドロップダウンリストを、名前を「favorite」、ID名を「select-title」、

2011年5月21日 ロールオーバー時の画像とは別に、カレント時の画像も設定できるロールオーバーjQueryプラグインを作りました。 あらすじ ナビゲーション用の画像は3種類用意されるケースがよくあると思います。通常時の画像、ロールオーバー時の画像、もうひとつが、アクティブなページを表す画像です。 よく見かけるjQueryのロールオーバープラグインは、通常時の画像を「image.png」、ロールオーバー時の画像を「image_on.png」などにしておき、マウスオーバー時に画像を差し替えているものが多いです。ただし、これだとアクティブなページに別の画像を使おうとした際に、ちょっとややこしくなります。 このjQurtyロールオーバープラグインは、ナビゲーション部分に共通のHTMLを使っていても、アクティブページ用の画像を表示することが可能です。 ダウンロード 似たようなプラグインを配布してま

2010年12月21日 wordpressで会員制サイトを作る際に便利な、ログイン後に好きなURLへリダイレクトするプラグインの紹介。 wordpressで会員サイト制作 wordpressで会員だけが記事を閲覧できるようにする場合、会員に「購読者」の権限を与えて、表示を制御するのが一般的だと思います。 wordpressでは、通常、ログインするとダッシュボードの画面に切り替わりますが、フロント画面にログインフォームを設置している場合など、ログイン後に管理画面ではなく、トップページを表示したいことがあります。 そんな時に役立つのが、今回紹介するPeter’s Login Redirectプラグインです。 設定例：購読者をトップページにリダイレクト プラグインは英語です。なんとなく雰囲気で操作すればイケますが、今回は需要がありそうな設定を例に挙げます。 購読者権限ユーザーがログインしたら、ト

2010年11月16日 記事内でテンプレートフォルダまでのパスを表示させるためのショートコードを登録する方法。 テーマフォルダ内の画像を掲載したい！ wordpressの投稿記事本文の中で、テーマフォルダ内の画像を使いたいときがあると思います。 僕の場合、企業サイトをwordpressで構築するときに、そういったケースがちょこちょこあります。通常、静的なページはwordpressの投稿ではなく「ページ」として作成しますが、ページ本文の中で使用する画像を、普通に投稿画面からアップしてしまうと、クライアントが記事を編集する際などに、間違って削除してしまう可能性があります。だから、クライアントが削除できない場所である「テーマフォルダ」内に画像を入れておき、その画像をページ本文の中で使うという手法を使います。 画像のパス・・・どうする？ ・・・だが、ちょっと面倒なことが起きます。テンプレートフォル

2010年9月25日 商用利用も可能！HTML5・シンプル・軽量、そしてちょっぴりセクシーなwordpress theme「D5」を無料で配布してます。 wordpress theme 「D5」について 「D5」は、wordpress3.0以上に対応したテーマです。以下の特徴があります。 無料！ 商用サイトでの利用可能！ カスタムメニュー、ウィジェット、カスタムヘッダー画像に対応。 HTML5による先進的なマークアップ。 テキスト主体のシンプルでスタイリッシュなデザイン。 3人のセクシーな女の子から好きな子が選べます！ 日本語のテーマなのでなんとなく安心な気がする。 新たにデザインするのが面倒だったので、このブログのデザインを流用しました。テキスト主体の日記などに最適だと思います。また、それなりにコードも分かりやすく書いたので、このテーマをもとにしたカスタマイズなどもしやすいかもしれません

2010年2月28日 jQueryを使って、シンプルにcssでのフォント指定関連の問題を解決しました。 以前、cssのフォント指定を完璧にするぜ2009 winterという記事を書きましたが、JavaScriptを使えば、もっとシンプルに指定できると思いつきました。こういった試行錯誤は、とても楽しいですね。 フォント指定のコード 2010 Spring <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ if($.browser.msie){ $("body").addClass("msie"); } if (navigator.platform.indexOf("Win") != -1) { $("body").addClass("wi

2007年6月16日 floatさせた要素を、その親要素で解除する、いわゆる、クリアフィックスというテクニックの解説。 floatさせた要素を、その親要素で解除する方法があります。いわゆる、クリアフィックスというテクニックです。 構造のマークアップなしでフロートをクリアする方法 このテクニックで、ずっと悩まされてきた問題を解決できました。ので、悩まされてきた内容を書いて、心に焼き付けておきます。 問題のHTMLコード そもそも、floatを利用して回り込みを行う際、どうやって解除するか非常に悩む場面があります。僕が昔からずっと悩んでたのが、以下のコード。 メニュー1 メニュー2 メニュー3 メニュー4 ようするに、<li>タグにfloatをつけて<ul>内で横並びのナビゲーションを作るときなんだけれど、回り込みさせた<li>を、どのポイントで解除すればいいの？というやりきれない思いで胸がい

2010年4月10日 画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。 フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。 動作サンプル www.daichifive.com 自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。 追記 上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。

2010年3月25日 wordpressのテンプレートでよく使う条件分岐をメモ。 なんか、wordpressでテンプレートを作るたびに、条件分岐のタグを調べている自分がいたので、次から調べなくてもいいように、よく使いそうなものをまとめておきます。 書式 <?php if (is_page('contact')) {?> 内容 <?php } ?> 通常はテンプレート内で、上記のようにif文の判定に使います。 条件分岐一覧 is_front_page()

2009年9月15日 カテゴリごとに記事の表示件数を設定できるCustom Query String Reloadedがサブカテゴリで使えないので、仕方なくテンプレート変数で制御した。 Custom Query String Reloadedが使えないで賞 wordpressには、カテゴリごとに記事の表示件数を設定できるCustom Query String Reloadedという便利なプラグインがあるのだが、サブカテゴリに設定しても反映されなかった。ちくしょう。だから、このページから、プラグインのページにはリンクを貼ってあげない。 テンプレートで表示件数を指定する そもそも今回、なぜカテゴリ毎に記事表示件数を変えたいかというと、カテゴリによって1行に3列の記事が並ぶパターンと、2列の記事が並ぶパターンを作りたいからだ。3列のほうは、×3行で1ページに9件表示するのだが、奇数なので、2列の

2010年3月14日 wordpressをCMSとして企業サイトを作るときに役立つ、複数ループのやり方を紹介。 少々、前置きが長くなりますけど。 wordpressをCMSとして使用する際のシンプルなページ構成例 企業サイトなどでwordpressをCMSとして使用する場合、サイトの規模にもよりますが、「お知らせ」などの日々更新されるコンテンツを「ブログ記事」として作成し、その他を「固定ページ」として作成するのが、一般的かと思います。 wordpressでは、固定ページをサイトのトップページ（フロントページ）に設定できるため、スマートなサイト設計が可能です。実在するサイトを例に挙げて説明したほうが分かりやすいと思うので、僕が構築した「とんぼ整体院」のサイトを例に、説明を進めていきます。 下記は、とんぼ整体院のページ構成をまとめたものです。 非常に作りやすそうな、シンプルな構成ですね。更新さ

2010年2月21日 ページ内リンクをスムーズスクロールさせるjQueryプラグインを作ってみた。 今あるサイトに読み込むだけの簡単設計 巷にありふれている、ページ内リンクをスクロールさせるための、jQueryプラグインです。正直、「新しく作る必要なくね？」な印象は拭えません。 しいて言えば、今あるサイトに読み込ませるだけでページ内リンクが自動でスクロールするようになるため、初心者にやさしい設計だということです。 あと、最後に言い残すこととしては、「これなら自分にも作れそう」・・・と、思うことって、最初の一歩を踏み出すのにすごく大切なことだと思う。ってことだけです。 DOWNLOAD - jquery.scroller.d5.js サンプル このサイトでも使用しているので、このページのフッターにある「このページの先頭へ」というリンクで動作が確認できます。 簡単な使い方 <script ty