WordPressの投稿記事一覧で本文の文字数を指定して表示する
トップページやサイドバー等に最近の投稿記事一覧を表示する時に、本文の文字を指定した文字数だけ抜粋して一緒に表示する方法です。 下記のコードで下の画像のように、日付とタイトル、本文の最初の20文字を抜粋して表示する事ができます。 <?php $postslist = get_posts('numberposts=5&orderby=post_date&order=DESC'); //$postslistにget_postsで取得したデータを入れる foreach ($postslist as $post) : setup_postdata($post); //ひとつずつ取り出して繰り返し出力する ?> <dl> <dt>■ <?php echo get_the_date(); ?> //日付を表示 | <?php the_title(); ?> //タイトルを表示 </dt> <dd><?p
body_class を使ってページごとに違う表示をする
body_classはbody要素用のテンプレートタグです。 下記のようにbodyタグに記述すれば、表示するページの種類などによってbodyに自動的にクラスを付加してくれます。そのクラスを使いcssをページごとに変えたりする事ができます。 <body <?php body_class(); ?>> body_class( $class ); $class にはクラス名が入ります。独自のクラスを付けることもできます。 使用例 <body <?php body_class(); ?>> トップページには body class=”home” というクラスが付くので、下のようにcssに記入すれば、トップページのヘッダーだけ背景を黒にしたりできます。 .home #header{ background-clor:black; } #header{ background-clor:grey; } 独自
PNGファイルを軽量化してくれるWebサービス-TinyPNG
透過PNGにも対応したPNGファイルを軽量化してくれるWebサービス、「TinyPNG」がこちらの記事「What’s new for designers, July 2012 | Webdesigner Depot」で紹介されていたので使ってみました。 画像の色数を減少させることによってファイルサイズを小さくしているようです。透過PNGにも使えます。 使い方 「TinyPNG – Compress PNG images while preserving alpha transparency」へ行って、「Drop your .png file here!」のところへPNGファイルをドラッグ＆ドロップします。画像の軽量化が終わると何％軽量化できたかを表示してくれます。 ”download”をクリックで軽量化されたPNGファイルをダウンロードできます。 TinyPNGで軽量化した画像サンプル 実
WordPressのサーバー移転メモ
Wordpressのテーマや画像などはWordpressのファイル本体にありますが、 記事の内容などはMySQLのデータベースにありますので、 WordpressのファイルとMySQLのデータベース本体の両方をダウンロードしインポートする必要があります （※ファイルを書き換えたりするので、すべて元ファイルをバックアップして行う事をお勧めします。） まず、FTPでWordpressのファイルを丸ごと全部ダウンロードします。 wp-confing.phpをエディタで開きデータベース名、ユーザ名、パスワード、MySQLのホスト名を新しいデータベースのものに変更し保存します。 次にブログのデータをMySQLのデータベースから取り出します。 私はphpMyAdminからデータをエクスポートしました。 エクスポートとインポートの方法は以下です（キャプチャ参照クリックで拡大します） phpMyAdmin
横幅いっぱいに画像を表示してくれるjQueryプラグイン-bgStretcher ｜ memocarilog
ブラウザの横幅いっぱいに画像を表示してくれるjQueryプラグインbgStretcherを使ってみました。bgStretcherはブラウザのサイズを小さくしても画像のアスペクト比が維持されて表示されます。 このブログの背景は画像を横いっぱいに広げるのをCSSで表示しているのですが、iPhone等の横幅が小さい画面でみると画像が縦に伸びてしまって嫌だなぁと思っていたんです。丁度こちらの記事で”[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher | コリス”プラグインが紹介されていたので早速使ってみました。 サンプルも作りました。 Internet Explorer 6, 7, 8, 9、Firefox 2, 3, 4、Opera 9+、Safari、Chromeにも対応しているようです。幅広いブラウザに対応しているので実用的に使えそうです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
