「このページだけ、違うスタイルシートを適用したいな〜」と思ったことはありませんか? WordPress のテーマファイルには必ずスタイルシート(style.css)が含まれているはずです。そして、基本的にそこで決めたスタイルは全てのページに適用されます。でも、ページによってはちょっと違うスタイルを適用させたい……と思う時がありますよね。 例えばトップページだけ別のスタイルにしたいとか。 そんな時は、コンテンツに直接スタイルを適用することもできます。<span> とか <div> タグを使って、特定の部分だけデザインを変更することもできます。 でも、それをいちいちやっていると面倒です。「このページの見出し2(H2)は、全て赤文字にしたい!」と思ったとしても、見出し2が出て来るたびに <span> を使ってスタイルを指定しなくてはならなくなります。そんなの面倒ですよね。なので、「このページの見
WordPressでニュースサイトに近いサイトを作っていたのですが、カテゴリ別に記事一覧を出したいと思って色々と探していました。カラムを2つとか3つに分けて、それぞれ縦にサムネイルを付けてカテゴリ別に新着記事を出すことを考えていました。 『WordPress Popular Posts』を使えば、カテゴリでの一覧は出せるものの、新着記事ではなく人気記事なんですよね。他にも希望に近いコードやプラグインはあるものの、どうも自分が求めるちょうど良いものがなかったので、自分でコードを組んだので公開したいと思います。 固定ページや投稿記事で使いたい場合には、『Exec-PHP』などのプラグインを使って利用して頂ければと思います。 サムネイル付きカテゴリ別記事一覧のサンプルここでは、カテゴリを”WordPress”に設定して、最新の記事を5つ表示するようにしています。 まず、どのカテゴリか分かるように
トップページやサイドバー等に最近の投稿記事一覧を表示する時に、本文の文字を指定した文字数だけ抜粋して一緒に表示する方法です。 下記のコードで下の画像のように、日付とタイトル、本文の最初の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
季節はずれの大雪ってどうなの?GWに無事に桜が開花するか心配なフジカワです。 上手くタイトルがつけられない おかしなタイトルでごめんなさい。タグありきの正引き的にするか、実現することを前にだす逆引き的タイトルにするか悩んだ挙句、中途半端になりました。 さて、WordPressのトップページに ・カテゴリを指定して ・エントリーの表示する数を指定して ・かつ、各カテゴリで、表示するエントリー数は異なる。 というのをやりたかったわけ。 イメージとしてはポータル系ニュース一覧みたいな感じ。 「国内」とか「経済」とか「スポーツ」などのジャンルが「カテゴリー」に相当して、 それぞれのジャンルの表示数をコントロールしたい、と。 調べていくと 実現方法を調べてみると、どうやら大きく分けて2つのタグで実現可能な様子。 ・get_posts ・query_posts のどちらか。 違いをみてみる 結果として
カテゴリー内の記事リストを表示することは、トップページの新着記事とかサイドバーとか、使う機会がが多いです。 特定のカテゴリーの記事一覧を表示する例カテゴリーID:5の記事を10件表示するget_postsで特定のカテゴリーに属する記事を取得します。 $args = array( 'posts_per_page'=> 10, 'category'=> 5 ); $myposts = get_posts( $args ); if( ! empty( $myposts ) ){ $html = '<ul>'; foreach ( $myposts as $post ){ $html .= '<li><a href="' . get_permalink( $post->ID ) . '">' . $post->post_title . '</a></li>'; } $html .= '<ul>';
3カラム作成に必要な下準備の方法が下の記事リンク先に書いてあります。 【Twenty Twelve】3カラムの作成方法 CSS3を使用してTwenty Twelveで3カラムを作成してみました。 プロパティの値は、好きな値に直して使用してください。 スタイル(中央に記事、両サイドにサイドバー) 下の画像のように、真ん中にメインコンテンツ(投稿記事)、両サイドにサイドバーの3カラムにするスタイルを設定します。 サイドバー(sidebar-right.php)の追加場所1 テンプレートファイルの下の方にあるget_sidebar()の前に追加します。 <?php get_sidebar( 'right' ); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> 下のコードをstyle.cssの@media screen and (min-widt
Twenty Twelveテーマは、デフォルトで2カラムで表示されます。 それを3カラムにする方法について、いくつか考えましたが、まずは下準備について書きます。 この記事で編集するテンプレート functions.php sidebar-right.php(別の名前でも可) index.php single.php search.php page.php category.php author.php archive.php tag.php ウィジェットの追加 3カラムにするのに別のウィジェットを使用するので、functions.phpファイルに下のコードを追加します。 register_sidebar( array( 'name' => '左サイドバー', 'id' => 'sidebar-4', 'description' => '左サイドバー', 'before_widget' =>
カスタムヘッダー画像のサイズは、「外観」-「ヘッダー」メニューで、幅と高さが指定されています。Twenty Elevenは幅1000pxで高さ288px、Twenty Twelveは幅960px、高さ250pxになっています。 カスタムヘッダー画像のサイズ この設定を変更するには、Twenty Elevenではfunctions.phpのカスタムヘッダー設定を変更します。次の「288」を変更すれば、高さを好きな値に設定することができます。 $custom_header_support = array( // The default header text color. 'default-text-color' => '000', // The height and width of our custom header. 'width' => apply_filters( 'twentyel
ワードプレステーマTwentyTwelveは、Elevenに比べるとそんなに余白部分は多くはありません。しかし、ヘッダー画像をアップロードして実際にサイト表示をしてみると…、 ん~ん、やっぱりどうしても気になってしまいます。タイトル周りの余白やヘッダー画像との隙間、グローバルナビが離れてるww など、結構気になります。 って事で、これらの余計な余白部分を全て撤去しようと思います。それでは、管理画面の「外観」⇒「テーマ編集」から、スタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい) スタイルシートの次の部分を探してみて下さい。 /* Header */ .site-header { padding: 24px 0; padding: 1.714285714rem 0; } .site-header h1, .site-header h2 {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く