タグ

ブックマーク / www.webopixel.net (11)

  • jQueryでリストを一つずつ遅延して表示する

    jQueryでリストを一つずつ遅延して表示する リストじゃなくてもいいのですが、羅列されたリストなどを表示するときjQueryで一つずつ表示してみます。 投稿日2013年03月15日 更新日2019年04月13日 とりあえずhtmlでリストを作成します。 html <ul class="delay-show"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> ...... </ul> jQueryのコードはこんな感じです。 javascript $(function() { $('ul.delay-show li') .css({opacity: 0}) .each(function(i){ $(this).delay(500 * i).animate({opacity:1}, 1500); }); }); delay メソッドでタイミングを遅らせて実行

    jQueryでリストを一つずつ遅延して表示する
    f-suger
    f-suger 2013/03/19
  • WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」

    WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」 一つのプラグインでカスタムフィールド・カスタム投稿タイプ・カスタム分類を管理できる、「Types」をご紹介いたします。 投稿日2013年01月09日 更新日2013年01月09日 カスタム投稿タイプの作成 プラグインをインストールするとメニューに「Types」という欄が作成されます。 カスタム投稿タイプを作成する場合「Custom Post Types及びTaxonomy」というメニューを選択します。 「Custom Post Type追加」「Custom Taxonomy追加」というボタンが表示されますので、カスタム投稿タイプを追加する場合は「Custom Post Type追加」を選択します。 「新規Custom Post Typeを追加」画面が表示されます。 カスタム投

    WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」
  • jQueryで指定ユーザーの最新のYoutube動画を表示する方法

    jQueryで指定ユーザーの最新のYoutube動画を表示する方法 最近では自社のWebサイトにYoutube動画を載せたいといったケースが増えていますね。動画単体だったら公式の埋め込みコードで簡単に表示させることができますが、更新が頻繁にあるとそのつどWebサイトの更新をしなくてはいけないので面倒です。 そこでこの記事ではjQueryで自動的に最新動画を取得する方法をご紹介します。 投稿日2012年01月19日 更新日2015年11月05日

    jQueryで指定ユーザーの最新のYoutube動画を表示する方法
  • PHPでOAuth認証して自分のつぶやきを表示する [Twitter API 1.1 対応版]

    「Name」は独自のものにする必要があります。 「Website」は設置するサイトに変更してください。 「Callback URL」はユーザーに認証させる場合は必要ですが、今回は自分のツイートを表示するだけなので必要ないです。 「Yes, I agree」にチェックして「Create your Twitter application」ボタンをクリックします。 「Consumer key」と「Consumer secret」をメモして、「Create my access token」をクリックします。 画面が遷移して Your access token という欄が増えますので「Access token」「Access token secret」をメモしておきます。 PHPで自分のつぶやきを表示 認証にはライブラリを使用すると簡単です、今回は「abraham/twitteroauth」というの

    PHPでOAuth認証して自分のつぶやきを表示する [Twitter API 1.1 対応版]
    f-suger
    f-suger 2012/12/29
  • サジェスト+Ajaxでタグがスムーズに入力できるjQueryプラグイン「Tag-it!」

    サジェスト+Ajaxでタグがスムーズに入力できるjQueryプラグイン「Tag-it!」 タグ入力を補完してくれるjQueryプラグインは探すと結構あったのですが、日語でサジェストが上手くいかなかったり、CSSでスタイルがカスタマイズできなかったりと色々問題がありまして、最終的にこの「Tag-it!」 に落ち着きました。 投稿日2012年11月29日 更新日2012年11月29日 ダウンロード 「Tag-it!」は下記URLからダウンロードしてください。 また、別途 jQuery と jQuery UI が必要です。 jQuery Tag-it! プラグインをダウンロードしたらheadなどで読み込みましょう。 下記では jQuery などのライブラリは Google CDN で読み込んでます。 html <link rel="stylesheet" type="text/css" hre

    サジェスト+Ajaxでタグがスムーズに入力できるjQueryプラグイン「Tag-it!」
    f-suger
    f-suger 2012/11/29
  • WordPressのプロフィール編集画面にカスタムフィールドを追加するプラグイン「Cimy User Extra Fields 」

    WordPressのプロフィール編集画面にカスタムフィールドを追加するプラグイン「Cimy User Extra Fields 」 管理画面のプロフィール編集画面にカスタムフィールドを追加できるプラグイン「Cimy User Extra Fields 」のご紹介です。 「Cimy User Extra Fields 」は通常のテキストフィールドの他にも、画像アップローダーやチェックボックスなどのフィールドをGUIの操作で追加することができます。 投稿日2010年09月06日 更新日2011年04月03日 Cimy User Extra Fieldsオプション設定 プラグインをダウンロードしたら、通常通り「plugins」フォルダにアップしてインストールしましょう。 また、「wp-content」フォルダに「Cimy_User_Extra_Fields」という名前で新たにフォルダを作成します

    WordPressのプロフィール編集画面にカスタムフィールドを追加するプラグイン「Cimy User Extra Fields 」
  • WordPressのサイト内検索の検索条件をカスタマイズする

    WordPress3.3.2を使用しています。 2012.06.01 「投稿記事だけ検索したい」に抜けている部分があったので修正しました。 検索フォームの設置 一つのテキストフォームだけで検索する場合は以下のコードを表示させたい位置に配置するだけですね。 wp template <div id="search-box"> <form method="get" action="<?php bloginfo( 'url' ); ?>"> <input name="s" id="s" type="text" /> <input id="submit" type="submit" value="検索" /> </form> </div> あとは「search.php」を作成して適当にループさせれば検索結果が表示されます。 投稿記事だけ検索したい 標準のサイト内検索は固定ページも検索範囲に含まれて

    WordPressのサイト内検索の検索条件をカスタマイズする
    f-suger
    f-suger 2012/11/27
  • WordPressのカスタム投稿タイプでイベント情報ページを作ってみる

    もくじ カスタム投稿タイプの設定 カスタム分類(タクソノミー)の設定 カスタムフィールドで日付を入力 jQuery UI で日付を入力しやすくする イベント一覧画面に項目(カラム)を追加する 未来のイベントだけを表示するアーカイブテンプレート 月別にイベントを表示する 月別にイベントにリンクするナビゲーション また、タイトルいは「カスタム投稿タイプで」なんて書いてありますが、どちらかというとメタデータで日付の取り扱い的なことがメインとなっています、ベーシックなカスタム投稿タイプの例は「WordPressのカスタム投稿タイプで作るよくある質問(Q&A)ページ」 をご覧ください。 カスタム投稿タイプの設定 管理画面で入力するところから作っていきます。最初はカスタム投稿タイプです。 function.php function event_postype() { $labels = array(

    WordPressのカスタム投稿タイプでイベント情報ページを作ってみる
  • Gitでバージョン管理しよう(ひとりGit編)

    Gitでバージョン管理しよう(ひとりGit編) まったくバージョン管理したことない人にお送りする、ひとりGit入門記事です。 というか書いている人が超初心者なので、すごく間違えていることろがあるかもしれませんがご了承ください。 投稿日2012年10月24日 更新日2012年10月28日 なぜバージョン管理システムが必要なのか たとえば「index.html」というファイルを大幅に修正したかったとします。 もとの「index.html」は残しておきたいので、「index1.html」とリネームしてみたり、もしくはバックアップフォルダにコピーするなどの方法が考えられます。 しかし、それだと後で見返したときに何のファイルどんな修正をしたファイルなのかわからないですよね。 そこで登場するのがバージョン管理システムなわけです。 初期設定 バージョン管理を始める前にGitの初期設定をしましょう。 まず

    Gitでバージョン管理しよう(ひとりGit編)
    f-suger
    f-suger 2012/11/09
  • WordPressのプラグインを開発しよう(初級編)

    プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function show_text() { echo 'おはようございます。'; } これはテンプレートファイルに「<?php show_text(); ?>」と書くと「おはようございます。」と表示するだけのコードです。 これをプラグイン化してみます。 プラグインは「wp-co

    WordPressのプラグインを開発しよう(初級編)
    f-suger
    f-suger 2012/11/09
  • jQueryでスクロールすると表示する系いろいろ

    jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

    jQueryでスクロールすると表示する系いろいろ
  • 1