月別アーカイブ: 2013年4月

アイキャッチがある単独ページではヘッダー画像を表示しない

WordPressで複数ヘッダー画像をcssスライドショーで動かすで設定したヘッダー画像ですが、投稿にアイキャッチを入れることにした為、アイキャッチがある場合は邪魔になってきました。
そこでheader.phpを編集し、アイキャッチがある単独ページの場合はヘッダー画像を表示しないようにしてみました。

ページを読み込んだ時に一度だけ動かすCSSのanimation

まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。

ページを読み込んだ時に要素をanimationさせる

これは単純に、目的の要素にanimationを指定するだけで良い。
.appear {animation:show 1s both;} の部分がそれ。ショートハンドで書いているのをサブプロパティに書き下すと、以下のようになる。

animation-name(@keyframesの名前)
show
animation-duration(アニメにかける時間)
1s
animation-fill-mode(アニメの実行前後に、keyframesの0%と100%に指定したスタイルを適用するか。)
both

animation-fill-modeでアニメの開始前と終了後をコントロール

まずは animation-fill-mode がミソ。以下の4つの値を指定できる。defaultはnone。

none
keyframes内の指定は、アニメ中にだけ効果が及ぶ。
forwards
アニメが終了した後も、100%に指定した状態をキープする。
backwards
animation-delayの間(アニメする前)に、0%に指定した状態で待機させる。
both
forwardsとbackwardsの両方の効果

詳しくはanimation-fill-mode – CSS | MDNを参照して下さい。

animation-animation-iteration-countは初期値が1

次のミソがanimation-iteration-count。アニメの繰り返し回数の指定で、無限ループなら infinite で指定できる。初期値が1なので、ショートハンドで数字を書かずに省略すると、1回だけのアニメーションになる。

詳しくはanimation-iteration-count – CSS | MDNを参照の事。

animation-delayは、別のクラスを重ねがけすると便利

パラパラと、時間差で要素を表示しているのは、.d1 とか .d12 などのクラスに指定した animation-delay 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。

Facebookとwordpressを連携させたいのですが…

パソコン倶楽部りんごのFacebookページで、アプリを追加したことのあるメンバーの方に質問です。

Facebookとwordpressを連携させるため、wordpress側にFacebookの公式プラグイン「Facebook for WordPress」を入れてみました。
ダッシュボードへ行くと、左サイドにFacebookのタブが出来ております。

ところで、ここでの設定をするにはまずFacebook側で「新しいアプリケーションを作成」しなければならない様なのですが、りんごのページにそれらしきボタンが見つかりません(-“-;

Facebook Developer(開発者)のページの右上にある「Apps」から追加出来るとの情報もありましたが、この「Apps」をクリックすると、りんごのページに戻ってしまいます。

ちなみに、Facebookのヘルプには、

Q. Facebookページにアプリを追加するにはどうすればよいですか?

A. Facebookページにアプリを追加するには、まず追加するアプリの情報ページに移動します。アプリをページに追加できる場合は、左下に「マイページへ追加」リンクが表示されます。

とありますが、このプラグインのページへ行ってみても「マイページへ追加」リンクなどはどこにも見当たりません。
(追加出来ない筈は無いと思うのですが。)

ご存知の方、ご回答宜しくお願いします。

2013-4-19勉強会

今回もお菓子をありがとうございます。(ランサーしょうじさん、かおりんごさん提供)
勉強会の概要は

  • “勉強会の議事録をトップページに表示させるには”について
  • カスタム投稿タイプの補足
  • 投稿にアイキャッチを入れよう

でした。 続きを読む

勉強会の議事録をトップページに表示させるには

一番新しい議事録投稿記事のタイトル&本文の最初の30文字位をトップページに、表示させたい。
とりあえず、固定ページのトップページには、その表示させたい場所を作りました。

議事録を投稿したら自動でそこに表示させるにはどうしたらよいでしょうか?

phpを書く。プラグイン。ウィジェット。

2013-04-19の勉強会での勉強の題材として取り上げて下さい。

よろしくお願い致します。

上記の内容を2013-04-19の勉強会でやりました。以下議事録です。

①外観ーテーマ編集ーFront Page Template 固定ページテンプレート(page-templates/front-page.php)を開きます。そこに投稿カテゴリーの最新記事を呼び出して出力するphpを書きます。

コードは以下の通りです。

今回は、「最新の勉強会議事録」「最新の質問と回答」「最新のコメント」の3つの最新情報をトップページに表示することにしたので、asideの中にsectionを3つ作りました。

メモ

numberposts 1は最新の投稿を1つという意味です。
category 4はカテゴリーのID番号です。

カテゴリーIDの調べ方は、投稿ーカテゴリーのページでカテゴリー名にカーソルを持っていくと、画面下に表示されますので記憶して下さい。記憶力に自信がない人はメモをとって下さい。鉛筆でも万年筆でもクレヨンでも結構です。

上記のphpを書く場所ですが、今回はトップページの画像スライドショウのすぐ下に表示させる事になったので、page-templates/front-page.php内の

の下に書きました。

書く場所は、表示させたい場所によって異なります。ご注意ください。

②出力が出来ましたので、今度は適当に見た目を整えていきます。asideやsectionにidで名前を付けたので、そのidをcssでカスタマイズします。今回は、style.cssの一番下に書きました。

以上です。(真中のぶ)

先ほど、iphoneで見たら変な風になってたので、media queryで直しておかなきゃ!誰かやりたい人がいれば、やってくれてもいいですよ。

質問
firebugで見ると、sectionの中にh1が2つある事になっていますが、これは大丈夫なのでしょうか??
(こちらは、解決済です。先生のコメント参照)

—————————————————–
追加情報 2013-04-27 真中のぶ

投稿のアイキャッチ画像のサムネイル表示を以下のスクリプトで実装出来るようです。

wp 2012 google web fontsを指定したらテキストが二重に表示されるは何故か?

制作中のサイト
http://kuulei90.com/
ページタイトル

h1 とh2にgoogle web fontsを使用しています。
デスクトップ(firefox)で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ(safari)で見たら
文字は二重にはなってないけど、太くなってしまっています。

フォントは、クローンのstyle.cssで指定してます。

何故でしょうか?

2013-4-12勉強会

今日もお菓子をありがとう!2013-04-12お菓子

勉強会の概要は、

  • 『WP 2012 トップページに投稿ページの一部を表示させたい』について
  • WP カスタム投稿タイプとカスタムフィールドについて
  • モバイルファースト実践

  • です。 続きを読む

    WP プラグイン all-in-one-event-calendar (イベント管理)を設置してみようぜ!の巻

    Q.WP プラグイン all-in-one-event-calendar (イベント管理)ってどんなもの?
    A.カスタム投稿タイプを利用したwordpressのpluginです。(plug me inではありません)
    「パソコン倶楽部りんご」サイトのトップページにある「勉強会の予定」とメニューの「calender」というページの表(カレンダー)がそうです。(2つは同期してるので便利)イベントやスケジュールを管理するのに便利そうです。

    ではやってみます。ちなみに僕も初挑戦。

    まずは、all-in-one-event-calendarというプラグインをインストールして有効化する。有効化すると自動的にダッシュボードのメニュー(画面左に縦に並んでいる)にEventsという項目が追加されます。

    メニューのeventsのsettingsで色々と設定します。最初に大事なのは、どのページにカレンダーを表示させたいか
    です。カレンダー専用のページが必要なら、その表示させたいページをあらかじめ固定ページで作っておく必要があります。settingsで「どのページにカレンダーを表示するの~?」という項目があるので、あらかじめ作って置いた固定ページを選択。

    これで、ページにカレンダーが表示されました。そしたら適当にAdd Newで予定をいくつかアップしてみましょう。英語だけど良く読めば難しくないです。

    次は、トップページに予定の一部分を表示させます。これは、外観ーウィジェットで設定します。upcoming eventsというのが画面左にありますよね。それを画面右にドラッグする。トップページならフロントページウィジェットエリアだと思います。(人によって設定が違うと思うので「思います」としました。)ドラッグしたのをクリックすると、ちょっとした設定が可能です。何件表示させるとか。

    大まかには、こんな感じです。色などはCSSとかで変えられると思います。(まだやってないけど)。
    設定も色々あるので、これからやってみます。

    こんな感じhttp://kuulei90.com/

    これは、2013-04-12の勉強会で学びました。
    ——————————————–
    先生。
    これで大丈夫ですよね?

    WP 画像ギャラリープラグインとして優秀なNextGen Gallery

    制作中のサイトhttp://kuulei90.com/
    クライアントさんが、ライブの写真をを自分たちで更新したいと希望が出たので、
    投稿ページのカテゴリーに「Photo」を追加しました。

    投稿記事にたくさんの写真を直接掲載すると、カッコ悪いし、記事が長くなって
    見づらいので、サムネイル表示にして、lightbox的な感じにしたいと思いました。

    NextGen Galleryというプラグインでやる事にしました。
    みなさん使っているようで評価も良いです。
    これなら、htmlやcss,jQuery等の専門知識が無いクライアントさんにも都合がいいですね!

    説明が英語なので、日本語にしてくれるファイルもあるので、ダウンロードして
    FTPでアップロードしました。

    参考になったサイト
    http://kinome.biz/2013/01/nextgen-gallery.html

    記事に載せるには、以下のサイトで説明してあります。
    http://kinome.biz/2013/01/nextgen-gallery.html

    親切に説明してくれる方々が世の中にはたくさんいて、便利になりましたね。ホントに助かります。
    みなさん、ありがとうございます。

    WP 2012 トップページに投稿ページの一部を表示させたい

    現在制作中のサイトhttp://kuulei90.com/

    クライアントさんの希望で、トップページに「次のライブ情報(日にちが近い1回分)」と「pick up(お勧めの1コ)」を載せたいという事です。

    「次のライブ情報」は、投稿ページsheduleからと、「pick up」は、投稿ページnewsの一部を抜粋して表示といった感じです。クライアントさんがTopページ(固定ページ)を
    いじらなくてもいいようにカスタムしようと思います。りんごのメンバー紹介とか近いのかなあ?

    ザ未経験です。

    雰囲気的にはPHPを書くんだろうなあーと感じています。
    もしかしてプラグインであったらラッキーとも思っています。
    視界が、ぼや~っとしています。

    アドバイスやヒントを下さいませ。

    よろしくお願いいたします!

    Favicon

    真中さん、
    Faviconの画像のアップありがとうございます。
    画像はサイボウズのと同じか..?ちょっとハートに見えた..
    プラグインall-in-one-faviconのおかげで、
    画像のアップロードをするだけでセットできるんですね。
    働いている all-in-one-favicon.phpのほうを見ると、行数は結構長いですね。
    index.html内に

    と書いていた頃が懐かしい!!

    WP TwentyTwelve ヘッダー画像をトップページにだけ表示させたい。

    twenty twelveをカスタマイズ中です。
    http://kuulei90.com/

    ページによってヘッダー画像を変えたいと思っています。(ランダムではなく)

    手順としては、
    まず、外観ーヘッダーで設定するヘッダー画像をヘッダーだけに表示させようと思います。
    ググッたらこちらのサイトがドンピシャだったのですが、記事の説明にある

    が僕のheader.phpに見当たりません。どういうことでしょうか?
    参考にしたサイト
    http://presentnote.com/header_image-displayed-only-top_page/

    教えて下さい。よろしくお願いします。

    それができたら、固定ページの各編集画面に直接画像を設置しようと思います。
    まだ、外観ーヘッダーで設定するヘッダー画像が残っている状態ですが、こんな感じ。
    http://kuulei90.com/?page_id=20

    /////////////////////////////////////////////////////////////////////////////////////////////
    先生。早速の回答ありがとうございます。
    理解しました。header.phpを以下の様に追加しました。

    これで、解決しました。
    次は各固定ページに、それぞれのページの内容に合った画像を挿入していきます。

    この、先生のコメントに対するコメントは、普通に返信でやると、「crayon」が使えないので、ここに追加で書きましたが、
    コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか?

    WP TwentyTwelve フッターの”Proudly powered by WordPress”を「Copyrightほにゃらら」に変更する

    内容は記事のタイトルそのまんまです。
    footer.phpを編集します。

    4,5行目をコメントアウト。
    7行目を追加。追加したら表示させたいテキストを入れる。テキストを入れる場所は、kuulei90.comと書いてある所。

    That’s All….so easy