tsukalogo0000

alt

レスポンシブWordpressサイト

macbookairwhite

このページはレシポンシブを目指したワードプレス別サイト用メインビジュアルのテストページです。上部のメニューをクリックする事で下部のコンテンツが反応して切り替わる仕組みです。他のjQueryとも干渉するので、定義付けが面倒ですが…。それ以上に工夫したいのは、レスポンシブ仕様へのこだわり…。しかも画像部分だけでなく、div要素そのものを可変したいので、それなりの効果がありそうな。ワードプレスでは、左側にメニューイラストを配置して右側にコンテンツとして、その中からこのjoomla!にリンクさせる予定です。ちなみにwordpressはblogから発展しているので、今まで使ってなかったのだが、レスポンシブを考えた場合フレームワークがややシンプルな分親和性が高そうなので今回試しに採用してみた。


ワードプレサイトhttp://tesign.sakura.ne.jp/wp/






<!--
$(function() {
  $('#swap').cycle({
    fx:'scrollLeft', /* 縦クスロールはscrollDown */
    speed:'2500', /* スライドが切り替わるアニメーション動作速度 */
    timeout:8500, /*スライド1つ1つの表示時間を指定 */
      sync: 1, /*消えるアニメーションと現れるアニメーションを同時に実行*/
    pager:'#menu',
    pagerEvent:'mouseover',
    pauseOnPagerHover: true,
    pagerAnchorBuilder:function(idx,slide) {
    return'#menu li:eq('+(idx)+') a';
    }
  });
  $('#swap').mouseover(function(){
    $('#swap').cycle('pause');
    });
  $('#swap').mouseleave(function(){
    $('#swap').cycle('resume');
    });
});
//-->

またまた、googlechromeに不都合が…webフォントの描画不可に続き、今度はjavascriptのスクロールが残像が残った感じでプレビュー出来ない。何故だ〜。


wordpress使用プラグイン

wordpressのプラグインは左バーメニュー>プラグイン>新規追加ページから、検索窓に名前を入力してインストールさせる事ができる。インストール後は有効化ボタンを押すとプラグインにより左バーに出たり、設定項目の中に追加されたりし、おおまかなセッティングが出来る様になりさらに細かいCSS等のカスタマイズは編集のページとなる。もちろん通常通りプラグインの開発ページからダウンロードし解凍した後にFTPでアップロードする事も可能だ。通常プラグインはwp-content>pluginsの中に格納される。投稿ページや固定ページ、その他各部分にプラグインを反映させる場合はウィジェットに項目が出てたり、ショートコードが設定画面で出てくるので掲載したいページに貼付けてやる。

WordPress 3.8.1プラグイン

SEO対策 All In One SEO Pack SEO関連の各種設定を行うことができるプラグイン。記事毎に「title」や「description」を設定したり「canonical」の設定などを行うことができる。
3Dタグクラウド WP-Cumulus タグクラウドが3D空間で回転表示するプラグインです。ノーマルでは文字化けするので日本語パッチを当てます。使い方はウィジェットから追加できます。
パンくずリスト Breadcrumb NavXT パンくずリストはカテゴリ―やタグ、日付などをベースに表示させる事ができる。
ヘッダータグ読み込み Header and Footer 本来はheader.phpに設定する各種機能をプラグインにより格納させ管理させるプラグインです。これで画面が真っ白にならないね。
トゥイッター&Facebook Simple Share Buttons Adder TwitterやFacebookの共有ボタンを簡単につけることができる意外とオシャレなパターンが入っているので使い勝手いいです。
最新記事埋め込み What's New Generator 新着情報の日付、タイトルは自動的に表示されます。また、タイトルをクリックすると該当のページが開く属に言う新着コラムです。ウィジェットに出てきます
お問い合わせフォーム Contact Form 7 問い合わせを行う場合に使用するメールフォーム。左バーの“お問い合わせ”と設定画面がでてきます。
画像プレビュー Shadowbox JS 似たようなものがある中で、しっかりどの媒体でも動いて軽く、シンプルで、使いやすくて、ちょっとかっこいい。rel="stylesheet"と要素に追加する。
管理画面カスタマイズ Ultimate TinyMCE 設定画面は左バーに露出します。チェックしていくと投稿画面に反映される。
ソースピックアップ WP SyntaxHighlighter SyntaxHighlighterというライブラリのWordPressプラグイン版。
ファビコン挿入 Favicon Rotator このプラグインは、なくても良かったかも…
スクロールでページが増える Infinite Scroll スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjインフィニティスクロールという機能でTwitterや、Facebookでおなじみ
サイトマップ PS Auto Sitemap 結構色々なパターンが選べて重宝しそう。<!-- SITEMAP CONTENT REPLACE POINT -->と希望ページを埋め込むだけ。
トップに戻る Back To Top これもトップに戻る素材が色々選べる。おおまかな設定と細かいCSS編集が可能
他のサイトの新着記事を取得する WP-RSSImport 他のサイトで発行しているRSSを収集して新着として表示する。

 

コメントを追加

お名前:
メールアドレス:
Webサイト:
件名:
コメント: