はてなブックマーク

『WordPress Popular Posts』というプラグインを使えば、WordPressで人気記事を簡単に表示することができます。 このプラグインではサムネイル画像の表示など詳細な設定ができるため、大抵の場合はこれを使えば問題はないと思います。 とはいえ、なるべくプラグインを使いたくない、テーマの方に組み込んで余計な設定の手間を省きたいというようなケースもあると思います。 ということで今回は、WordPressでプラグインを使わずに人気記事一覧を表示する方法をご紹介します。 はじめに言っておくと、ここでご紹介するソースのほとんどはGoogleで「WordPress 人気記事 プラグインなし」などで検索すれば同じようなのが出てきます。 一番分かりやすかったのは本記事末尾に記載した参考ページ①で、人気記事を取得する方法に加え、検索エンジンクローラーや自分がWordPressにログインして

僕はWordPressに投稿する場合、基本的にテキストエディターを使ってHTMLタグも手で打ったりAddquicktagに登録したものを使ったりしているので、ショートコードとは無縁のWPライフを送ってきました。 しかし、最近ブロガーさんやWebメディア運営に力を入れている会社さんからの制作依頼が増え、それに伴い「ビジュアルエディターで、より快適に記事を書く」ことを考えるようになりました。 ビジュアルエディターではHTMLタグを直打ちはできませんので、ショートコードを利用して環境を整える必要があります。 いらんところにpタグやbrタグが入ってしまう！ 非常に便利なショートコードですが、一つ問題がありました。 それは、意図しないところでｐタグ(段落)やbrタグ(改行)が挿入されてしまうこと。 これが原因で、変なところにスペースが空いてしまったり表示が崩れたりということが起きてしまいます。 とい

WordPressでは、一つの投稿を複数のカテゴリ―に登録することができます。 そして、ブログにカテゴリーを表示したいときには <?php the_category(); ?> と記述すれば、その投稿が登録されているカテゴリーをすべて表示することができます。 ところがブログのレイアウト上、登録したカテゴリーをすべて表示してしまうとデザインが崩れてしまったりする場合があります(特にアーカイブページなど)。 ということで、今回は投稿が登録されているカテゴリーのうち1つだけを表示する方法をご紹介します。 WordPressで複数カテゴリーのうち1つだけ表示するソース リンクあり <?php $category = get_the_category(); if ( $category[0] ) { echo '<a href="' . get_category_link( $category[0]

今回はウェブサイトの背景にフルスクリーンで動画を表示する方法についてご紹介します。 動画にはテキストでは伝えきれないニュアンスや雰囲気などを直感的に伝えることができるというメリットがありますので、有効に活用することでユーザーに強く印象を残すことができます。 Webデザインで動画を利用する方法 Webデザインに動画を利用する場合、大きく分けて2つの方法があります。 動画ファイル(mp4など)をサーバーにアップロードして利用 Youtube APIやjQueryプラグインなどを使用してYoutube動画を読み込む 一つ目は、自分のサーバーにmp4などの動画ファイルをアップロードしてvideoタグなどで埋め込む方法です。 この方法では動画周辺のUI(再生・ミュート・ボリュームボタンなど)のデザインまで自由に設計できますが、動画の読み込みに時間がかかる場合、ページの表示が著しく遅くなることがあるの

自分が運営しているブログやウェブサイトで使いまわせるWordPressテーマがほしいということで、あらかじめいろいろ機能を詰め込んだものを作ってみました。 サイトによって扱うテーマやジャンルが違うので、デザインは極力シンプルを目指しております。主な使用は以下の通り。 レスポンシブwebデザイン ヘッダーのレイアウト3パターン選択可能 メインビジュアルに画像、スライダー(2種類)、Youtubeを選択可 1カラム、2カラム、3カラムからレイアウトを選択可 サイドバーのメニューをウィジェット or カスタムメニューからも設置可 Googleアドセンスの広告をウィジェットから設置可 シングルページに関連記事一覧を表示 カスタムメニューからフッター部分のサイトマップを編集可 テーマカスタマイザーからフッター部分のSNSアカウント編集可 上記の仕様を実装したい場合は、以下のリンクに目を通して頂けると

WordPressで子テーマを使う場合、親テーマのCSSやJSの内容の一部を子テーマの方で上書きするというケースがほとんどかと思います。 上書きするには、WordPressが子テーマのCSSを読み込む前に親テーマのCSSを読み込む必要があるわけですが、子テーマのCSSの冒頭で@importで読み込ませる方法は推奨されていません。 また無理やりな方法ですが、親テーマのCSSを子テーマへ全コピーしてしまったら子テーマを使うメリットはほとんどなくなってしまいます。 ということで、今回は子テーマでCSSとJSを読み込む方法についてご紹介したいと思います。 親テーマと子テーマのCSSとJSを読み込むソース サンプルソースはこちらです。 functions.phpに追記してください。 functions.php //親テーマと子テーマのCSSとJSを読み込む add_action( 'wp_enque

WordPressテーマでは、CSSやJSなどの外部ファイルをfunctions.phpで読み込むことが推奨されています。外部ファイルの読み込みにはwp_enqueue_style関数、wp_enqueue_script関数を呼び出すアクションフックを作成します。 wp_head関数でCSSとJSを読み込むサンプルソース 下記のようにfunctions.phpに追記します。 functions.php /* CSSの読み込み ---------------------------------------------------------- */ function register_stylesheet() { //読み込むCSSを登録する wp_register_style('reset', get_template_directory_uri().'/css/reset.css');

上の画像のように、divなどのブロック要素の中に子要素を横並び(float)で表示させたいときに便利な方法。 この例では、幅150px、高さ100pxのdiv要素をマージン20pxで横に3つ並べています。 こういう場合、子要素の右と下にマージンを指定するのが一般的だと思います。 しかしこれだと、一番右端の子要素マージンの分だけ親要素より幅が大きくなるため、3番目の子要素が下に回りこんでしまいます。 3番目、6番目の子要素に別のクラス名をつけてスタイルを「margin-right:0;」と指定すれば意図した表示にはなりますが、結構めんどくさいですし、今後さらにに子要素を追加したり、並べ替えたりするときのことを考えるとできれば一括で指定したいところです。 ということで、子要素の3の倍数番目(3個、6個、9個、･･･)の右マージンを0して、親要素にピッタリはめてやります。 サンプルコード HTM

ブロック要素を中央寄せする場合、その要素の幅とマージンを指定します。 サイズ固定のブロック要素をdisplay: inline-blockで中央寄せする方法 HTML <div class="parent"> <div class="child">このブロック要素を中央寄せ</div> </div> CSS .parent { width: 100%; } .child { width: 300px; margin: 0 auto; } しかしこの方法は、あらかじめ幅を指定しておくことが難しい場合には使えません。 ということで、今回は可変幅のブロック要素を中央寄せする方法をご紹介します。 HTML <div class="parent"> <div class="child">このブロック要素を中央寄せ</div> </div> CSS .parent { text-align: cent

1つのページの中でカテゴリーごとに記事を一覧表示したり、そのそれぞれで表示件数を個別に指定したいときに使える方法。ブログのトップページなどで使うケースが多いのではないでしょうか。ループ処理にて条件を指定します。 ループ処理の基本形 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div class="post"><?php the_content(); ?></div> <?php endwhile; ?> <?php else: ?> <h2>記事がありません</h2> <?php endif; ?> 上のループ処理は、 記事があれば… タイトルを<h2>タグで囲んで表

記事タイトルを一覧表示するときなどに、レイアウトなどの関係で記事タイトルの文字数を制限したいときがあります。 そういうときには <?php the_title(); ?> を下記のように書き換えます。 <?php echo mb_substr( $post->post_title, 0, 20) . '...'; ?> 記事タイトルの文字数を20文字に制限しています。「20」の部分を変えれば任意の文字数に変更できます。 しかしこのままだと、タイトルが制限文字数以内の場合でも後ろに「…」が付いてしまいます。 そのため、if文を使って制限した文字数以上のときは省略して「･･･」を、制限文字数以内のときはそのまま表示されるようにします。 制限文字数以上のときだけ省略記号をつける <?php if(mb_strlen($post->post_title)>20) { $title= mb_subs

カスタムフィールドのテキストエリアで入力した改行を実際の表示でも反映させる方法です。 自分がすぐ忘れがちなので備忘録も兼ねてご紹介します。 通常はカスタムフィールドのテキストエリアで改行を入力して、その値を取得してWebページに表示すると改行が反映されません。 カスタムフィールドではHTMLタグは使えるので<br />タグを入力すればいいのですが、カスタムフィールドをクライアントご自身で編集して頂く際には、できるだけタグなど使わずに済むようにしたいです。 ということで、カスタムフィールドの値を呼び出すテンプレートタグを変更して、カスタムフィールドのテキストエリアに入力した改行をWebページでの表示にも反映させるようにします。 カスタムフィールドの値を呼び出すには、以下のようなテンプレートタグを使っています。 <?php echo get_post_meta($post->ID, 'フィール

ブログのトップページなどにカテゴリー別に記事抜粋を一覧表示する方法をご紹介します。 簡単にできますので、興味がありましたらやってみてください。 カテゴリーIDを指定したループを設置する カテゴリーIDを指定したループをWordPressテンプレート内に複数設置して、カテゴリー別の記事抜粋一覧を表示します。 そのために、まずは表示したいカテゴリーのIDを取得する方法とループの基本についてご説明していきたいと思います。 カテゴリーIDを調べるには？ WordPressのカテゴリーIDは、ダッシュボードのカテゴリー編集画面でURLを見れば調べることができます。 しかしちょっとめんどくさいというか、スマートな方法ではないような気もしますので、便利なプラグインをご紹介します。 ShowID for Post/Page/Category/Tag/Comment この「ShowID for Post/P