やっとできました! アイキャッチの表示。 アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。 WordPress にも実装されていて、アイキャッチ、またはサムネイルなどと呼ばれています。テーマによってはただ写真をアップロードするだけで表示されるものもありますが、中には自分でカスタマイズしないと表示されないテーマもあります。 ですので、ここでアイキャッチ(サムネイル)の一般的な実装方法について試行錯誤して分かったことをまとめておきたいと思います。 アイキャッチ画像を設定すると、ブログが消えた!? とにかく、めちゃくちゃ苦労しました。ワードプレスの記事投稿画面に「アイキャッチ画像を設定」という項目があるので、そこから簡単に設定で
テンプレートタグは、ブログのデータを動的に表示したり、個性的で面白いブログにカスタマイズしたりするときに、テンプレートの中で使います。下記は、WordPress で使える一般ユーザー向けタグの機能別一覧です。 テンプレートタグとテンプレートについての詳しい情報については、次のページをご覧ください。 テンプレートタグ入門 テンプレートタグ大解剖 テンプレートタグへのパラメータの渡し方 (パラメータの使い方の詳細) インクルードタグ (テンプレートファイルを他のテンプレートファイルに読み込むための、下記には載っていないタグ) 条件分岐タグ (ページの状況に応じて処理を変えたいときに使える、下記には載っていないタグ) 関数リファレンス (その他の関数) 非推奨の関数 (非推奨になったその他の関数) テンプレート (テンプレート、テーマ、タグの包括的なリスト) WordPress サイトデザイン
「ループ」は、WordPress の投稿を表示するために使われるPHPコードです。このループを使えば、現在のページに表示される各投稿を処理したり、ループタグ内で指定された条件に沿って投稿の形式を整えたりできます。ループの開始部分と終了部分の間に書きこんだ HTML や PHP のコードは、各投稿の表示に使われます。 テンプレートタグやプラグインの説明内に「このタグ(プラグイン)はループ内で使います」とある場合、タグが各投稿で繰り返して表示されます。例として、以下が各投稿にデフォルトでループ内に含まれます。 投稿のタイトル - the_title() 投稿の公開日時 - the_time() 属するカテゴリー - the_category() さらに他のテンプレートタグを使ったり、詳しい人ならば $post 変数にアクセスしたりして、投稿に関する様々な情報を表示することもできます。 ループに
ブログやメディアでよく見る、記事のサムネイルが並んでいるページ。もちろんWordPressでもこうしたデザインをテーマに組み込むことができる。 今回は、WordPressで記事の画像=アイキャッチを並べる方法を解説する。 WordPressでアイキャッチ一覧を使うまで WordPressではサムネイルのことをアイキャッチという。アイキャッチを使うには大まかに2つの手順がある。 WordPressテーマでアイキャッチ機能を有効にする。 アイキャッチ画像を呼び出す。 なんのことはない。『機能を有効化→実際にその機能を使う』というだけの話だ。この流れに沿ってその使い方を見ていこう。 WordPressテーマでアイキャッチ機能を有効にする アイキャッチ機能を有効にするため、add_theme_support(‘post-thumbnails’);をfunctions.phpで呼び出す。呼び出すタイ
こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。 WEBサイトのスタイルを調整することのできるCSSは、1つのCSSファイルだけでもデザインを作りあげることができます。 しかし、「コーポレートサイトとブログが1つのサイトにまとまっており、管理しやすいようにCSSファイルを分けておきたい」とか、「レスポンシブデザイン用のスタイルは別のファイルに書いておきたい」とか、「共通のスタイル以外は個別のCSSを読み込みたい」など、さまざまな要望があると思います。 管理上の問題、または無駄なスタイルの記述を読み込むことで、表示スピードへの影響も考えられますので、複数のCSSファイルにうまく分けておく必要もあります。 今回はWordPressで複数のCSSを追加する方法を紹介させていただきます。そしてページの種類や記事ごとに個別のCSSファイルを読み込むことも可能なので、あなたのWEBサイト
WordPressのユーザーコミュニティである『WordBench』(2018年9月23日をもって終了 WordPress Meetup に移行しています)にて「ループ」をテーマにした約4時間のハンズオンセミナーを行いました。 4時間、ループのことしかやらない勉強会はWordBenchでも異色だと思うのですが、参加された方の感想はおおむね好評だったようです。公式ドキュメントのCodex日本語版の「The Loop」の項が未翻訳というのも理由の一つかもしれません。 [2017.3.11追記 日本語訳されてました!] さて、WordPressカスタマイズのキモともいえるこのループ。私もかつて解説本から学んだとおり、 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- 記事があるときの表示内容をここに書
if、else、elseif とは、PHPスクリプトを条件によって振り分けるための制御文です。条件によって異なる処理を行う場合に利用し、頻繁に利用します。 ひとつの条件を満たす場合にのみ処理を行う場合は「if」を使って、以下のように記述します。 if( 条件 ) { /* 条件を満たす場合に行う処理 */ } ひとつの条件を満たす場合/満たさない場合に異なる処理を行う場合は「else」を使って、以下のように記述します。 if( 条件 ) { /* 条件を満たす場合に行う処理 */ } else { /* 条件を満たさない場合の処理 */ } 複数の条件がある場合は「elseif」を使って、以下のように記述します。 if( 条件① ) { /* 条件①を満たす場合に行う処理 */ } elseif ( 条件② ) { /* 条件②を満たす場合に行う処理 */ } else { /* 条件①も
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>タグで囲んで表
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile(ウェブモバイル)は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く