2013-4-26勉強会

今日もお菓子、あります。感謝。
勉強会の概要は

  • gunosyに登録しよう。
  • CSS3 border transition effects
  • Sharebarとget_excerptの干渉を回避する
  • frontページで投稿アイキャッチ画像を使う

gunosyに登録しよう。

gunosy(グノシー)はあなたのtwitterアカウントやfacebookアカウント、はてなアカウントからあなたの興味を分析し、興味にあったニュース・記事を推薦するスマートなパーソナルマガジンです。

gunosyに登録すると、50件くらいのニュースが送信されて来るので、その中から興味のあるカテゴリーのニュースを5個くらい選ぶ(ラジオボタンを押す)。そうすると、毎日20件や25件(件数は選択できる)の興味のある分野のニュースをgunosyが選んで送信してくれる。
gunosy

CSS3 border transition effects

先生がtwitterにツイートしたhttp://thecodeplayer.comを見てみた。

Sharebarとget_excerptの干渉を回避する

先週の勉強会で、frontページに以下を追加しました。

  • 最新の議事録抜粋
  • 最新の投稿
  • 最新のコメント

でも、get_excerptで取得した抜粋の冒頭に”TweetEmail TweetEmail”と表示されてしまっています。
スクリーンショット(2013-04-29 22.56.22)
これは、SNSボタン群を表示する為のプラグイン「Sharebar」の影響でした。Sharebarは使いたいので、get_excerptをget_contentで代用して、問題を回避しました。

get_contentだと、投稿の本文の全てが、htmlのタグ付きで取得できます。
strip_tags はphpの関数で、htmlタグを取り除きます。
mb_substr もphpの関数で、0文字目から100文字目までを切り出します。
echo ‘[…]’; で続きがあることをほのめかします。

frontページで投稿アイキャッチ画像を使う

投稿にアイキャッチ画像があれば、それをサムネイルとして表示します。上記のget_contentから作った抜粋の前に、以下のphpを挿入します。

cssの調整

サムネイル画像が表示されたら、そのレイアウトを含めて以下を調整します。

  • サムネイル画像と抜粋文をいい感じに横並びにする
  • aタグの下線をhover時だけにする
  • 600px以下表示領域の時に、#topBanner sectionを縦並びにする

2013-4-26勉強会」への2件のフィードバック

  1. ピンバック: ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する | パソコン倶楽部りんご

  2. ピンバック: プラグインとの衝突(干渉)回避。過去記事をアイキャッチ付きで表示するショートコードの場合 | 極楽ひだまり保育園

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.