Bootstrap 2.1「Affixプラグイン」がわかりにくかったので少し紐解いてみました | hijiriworld Web
仕組みは以下 Affixプラグインの仕組みを図解 まず、Affix要素はスクロール量とoffset引数によって、「.affix-top → .affix → .affix-bottom」と、クラスが自動的に変化していく。 offset引数（offset:top, offset:bottom）は以下の高さを指定する。 そうすると、状態変化と共にクラスが変化していく。 という仕組みがわかれば、さきほどの動作サンプル3でいいように見える。 でもこれは不完全。 正確には、”BootstrapのCSSを読みこんでいる場合”は不完全。 Bootstrapのサイトで実装されているAffixへの疑問 BootstrapのCSSを読み込んでいる場合、これだけではうまくいかないはず。 Affixが発動すると親要素の高さがゼロになるはず 追従を開始する（.affix）と、通常フローから逸脱する、つまり「posi
jQuery UI Sortable は並び順を保存しなければ意味がない | hijiriworld Web
jQuery UI はとても便利なライブラリなので使わない手はありません。 ドラッグアンドドロップで要素の並び替えができる Sortable →サンプル1 使い方 必要なJavaScriptファイル ・jQuery ・jQuery UI 実装 > コーディング <ul class="sortable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> > JavaScript $(function() { $( ".sortable" ).sortable(); }); たったこれだけで、ドラッグアンドドロップによる要素の並び替えができるようになります。 オプションやメソッドを設定することでいろいろできます。 リッチなUIって感じですね！ 「で？」 ていうか、 「並び
WordPress 階層構造のページリストをドロップダウンメニューにする | hijiriworld Web
jQueryを使って、階層構造の固定ページをドロップダウンメニューにする方法。 階層構造の固定ページを作成する WP管理画面 > 固定ページ > 新規追加 以下のような、2階層構造のページを作成します。 ページ1 - ページ1-1 - ページ1-2 - ページ1-3 ページ2 ページ3 子ページを追加する際は、ページ属性で「親」を指定しましょう。 ページリストを表示する wp_list_pages() ページリストを表示するには、テンプレートタグ/wp list pages を使います。 <ul class="page_list"> <?php wp_list_pages('title_li='); ?> </ul> マークアップ構造を理解する wp_list_pages() で出力されるHTMLは、以下のような構造になっています。 初期状態 <ul class="page_list">
まず最初に学ぶべきWordPressの本質 | hijiriworld Web
これからWordPressをはじめようと思っている人が参考にしているWebサイトや関連書籍は、どれもこれもいきなりテーマ作成から解説しているものばかりです。 まず最初に学ぶべきWordPressの本質をきちんと解説しているところは、ほぼ皆無です。 テーマ作成というのは、テンプレートタグやコードをを覚えればいいだけの話なのでたいして重要ではありません。あとでなんとでもなります。 それよりも、WordPressとは一体どのような動きをするものなのか？という全体的な仕組みをしっかりイメージできることが最も重要だと考えます。 デザイン、コーディング、プログラミング、いえ、Webの世界に関わらず、すべてのものごとへの深い理解には、その本質をイメージできているかどうかで大きな差が出てくるものです。 普段私が WordPress の講義を行う時には、まずこの本質的なイメージについてしつこいくらい解説する
WordPressのループの仕組みを深く知る query_posts() と get_posts() の違い | hijiriworld Web
Posted on: 2012/02/13 WordPressのループの仕組みを深く知る query_posts() と get_posts() の違い WordPressループの基本 <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <!-- 表示内容を記述 --> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> これは WordPressループの基本構文です
WordPress ログイン画面をカスタマイズする | hijiriworld Web
カスタマイズの方針 ・ログイン画面のテンプレートとディフォルトのCSSはいじらない ・関数とCSSでカスタマイズする ・テーマフォルダ内で完結させる 1. 独自のスタイルシートを用意する テーマフォルダ内に「login.css」というスタイルシートを用意します。 それを、ログイン画面で読み込む関数を、テーマフォルダ内の functions.php に記述します。 > functions.php function login_css() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/login.css">'; } add_action('login_head', 'login_css'); 2. ログイン画面のマークアップ構造を把握する ログイン画面で出力
WordPress メニュー機能を操る ~画像メニューにする方法など | hijiriworld Web
1. まずはメニュー機能の基本的な使い方 2. アクティブ時とポイント時のスタイルを変える 3. 画像メニューにする場合 4. あとがき – wp_nav_menu()ではメニューをPHPの値として取得できるらしいが… 1. まずはメニュー機能の基本的な使い方 メニュー機能をオンにする > テーマフォルダ/functions.php add_theme_support('menus'); カスタムメニューの作成 管理画面 > 外観 > メニュー メニューの名前: global-navi リンク先: 固定ページ テンプレートタグを記述 テンプレートタグ wp_nav_menu() を使います。 > テンプレート <?php wp_nav_menu(array('menu' => 'global-navi')); ?> ↓ 生成されるHTMLは以下のような構造になっています。 ※実際はもっとた
WordPress カスタムフィールドの使い方とその力 | hijiriworld Web
目次 1. カスタムフィールドとは？ 2. カスタムフィールドの使い方 3. カスタムフィールドの表示方法 4. カスタムフィールドのちょっとした小技 5. 拡張プラグイン Custom Field Template 6. 拡張プラグイン Advanced Custom Fields 1. カスタムフィールドとは？ WordPressの投稿フォームには、「タイトル」と「本文」の2つがあります。 ただのブログであればこれで十分ですが、CMSとしてWebサイトを構築しようとしたら不十分です。 WordPressには、投稿フォームに「カスタムフィールド」を追加できる機能があります。この任意の情報は「メタデータ」と呼ばれ、「名前」とその「値」の組み合わせからなっています。 つまり、「タイトル」と「本文」以外に、任意の入力フォームを追加できる機能といえます。 ↑目次に戻る 2. カスタムフィールドの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
