ウェブデザイナーの問題解決メモ

wordpressのhabakiriテーマで、ニュースを表示する部分を「news.php」として作成していました。 wordpressで固定ページに対象カテゴリーの投稿一覧を表示してカテゴリーにラベルをつける しかし、投稿の設定で「ブログトップに固定」の表示にチェックを入れても固定表示されないバグがありました。 調べてみると、get_postsを使用すると固定表示がされないという問題が発覚。 wp_queryで表示しなければいけないとのこと。 そこで、内容を大幅に書き換えました。 ■news.php <?php $arg = array( 'posts_per_page' => 5, //表示記事件数(-1で全件表示) 'category' => 10, //カテゴリーIDが10の記事にしぼりこみたいとき 'orderby' => 'date', //並び順 'order' => 'DESC' //降順(日付の新しい順) ); $query = new WP_Query($arg); ?> <?php if($query->have_posts()): ?> <?php while($query->have_posts()):$query->the_post();?> <a href="<?php the_permalink(); ?>"> <?php the_time('Y/m/d'); ?> <span class="label label-<?php $label = get_the_category(); $label = $label[0]; { echo $label->categ...

wordpress「habakiri」テーマの固定ページに、「お知らせ」のように投稿一覧を表示する方法です。 ①news.phpを用意します。 <?php $posts = get_posts('numberposts=5&category=1'); global $post; ?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <?php the_time('Y/m/d'); ?> <span class="label label-<?php $label = get_the_category(); $label = $label[0]; { echo $label->category_nicename; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span><br /> <?php the_title(); ?> </a> <?php endforeach; endif; ?> ■内容の説明 numberposts=表示する件数。 category=表示したいカテゴリー番号。 （カテゴリー編集画面に入った時にURLに書いてあるtag_ID=*←の数字） 指定しない場合は全カテゴリーが表示される。 the_timeで年月日を指定。 class=label　habakiriテーマはbootstrapを使用しているので、ラベルのクラスを使って見栄えをつける <span class="label label-...

wordpressのhabakiriテーマを利用してホームページを作成しているのですが、「印刷しようとしたら表示がおかしい」と言われ、回避策を探しました。 とはいえ、最近ホームページを印刷するなんてあまり無いだろうと自分も思っていたのだが、まだまだ一部印刷需要はあるらしく…。 そのまま印刷しようとするとブラウザによっては（というかほぼ全てのブラウザ）スマホサイズの見栄えで印刷されてしまったり、タブレットサイズの見栄えで印刷されてしまったりします。 そもそもhabakiriテーマは、bootstrapを利用しています。 そこで、bootstrapを利用したサイトを印刷しようとした時に、主に同じ問題に当たるそうで、bootstrap用のprint.cssを見つけました！ https://github.com/onocom/bootstrap-print これを、habakiriの子テーマの直下に配置します。 style.cssと同じ階層です。 そして、子テーマのheader.phpに以下を追記します。 <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_template_directory_uri(); ?>-child/print.css">　　←この行を追加 <?php wp_head(); ?> get_directory_uri　は、親テーマのパスまでを呼び出してくれるところなので（つまりhabakiriのところまで）。 自分は「habakiri-child」という子テーマフォルダ名にしていたので、「-child」という文字を追加して、その直下のprint.cssを見に行くように共通ヘッダーへ追加しました。 そして更に、子テーマのstyle.cssに以下を追加します。 @media print and (min-width: 992px){ .container{ width:950px; } } @media print and (min-width: 768px){ .container{ ...

habakirriの子テーマにウィジェットエリアを追加して、ページフッターにメニューを表示するようにできました。 こちらのページ参照 引き続き、メニューを横並び表示にしていきます。 ①追加したフッターのclassにCSSを適用していきます。 style.css /*右詰めにします*/ .footer-menu-area{    text-align:right; } /*リストの上下に余白を取ります*/ .footer-menu-widget ul{ margin-top: 1em; margin-bottom:1em; } /*リストを横並びにして、リスト同士の間隔を開けます*/ .footer-menu-widget li{ display:inline-block; margin-left:1em; } /*ついでに、各リストの頭に矢印（＞）アイコンをつけちゃいます*/ .footer-menu-widget a::before{  font-family: "FontAwesome";  content: "\f138"; padding:4px 0; margin-right:10px;   -webkit-font-smoothing: antialiased;   display: inline-block;   font-style: normal;   font-variant: normal;   text-rendering: auto;   line-height: 1; } 以上。 habakiriテーマはfontawesomeを使用しているので、公式サイトにアクセスして、表示したいアイコンを選択すると、その詳細ページにアイコンを直接表示する方法（ ■補足■ display:inline-block;　その要素をインラインブロック（横に並ぶブロック）になります。 a::before　aタグの直前にcontentの中にある文字などを追加できます。

固定ページごとにヘッダーやメインメニューを変更すると、投稿ページだけは基本のメインメニューやヘッダーが表示されてしまうので、こちらも変更する必要がありました。 ①メインメニューを増やす こちらを参照 ②投稿カテゴリーを判断して表示するメニューを変える １．module/gnav.phpをカスタマイズする。 14行目に以下を挿入する <?php do_action( 'habakiri_before_global_navigation' ); ?> <!-- ここに以下を追加 --> <?php if ( in_category(array('news')) ): ?> <?php if ( has_nav_menu( 'menu1' ) ) : ?> <nav class="global-nav js-responsive-nav nav--hide" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'menu1', 'depth' => 0, ) ); ?> <!-- end .global-nav --></nav> <?php endif; ?> カテゴリーが「news」の場合 「menu1」のメニューが設定されている場合 「menu1」のナビゲーションを表示します …というif文の流れです。 元々14行目にあった部分は以下のように修正します。 <?php if ( has_nav_menu( 'global-nav' ) ) : ?> ↓ <?php elseif ( has_nav_menu( 'global-nav' ) ) : ?> もし「グローバルメニュー」が設定されていたら というところを、 「menu1」が設定されていたらそれを表示する それ以外の場合でもし、「グロー...

トップページと固定ページはデザインが異なるが、一つのデザインだけでなくページごとにレイアウトや色、cssを切り替えたい！（テンプレートを変えたい）という場合は、カスタマイズする必要があります。 今回は、デザインは同じだけどCSSで色だけ変更したいよ！という場合を紹介します。 大きな流れは以下です。 ①専用のphpを作る ②固定ページ内で「テンプレート」から任意のものを選択 ※子テーマの作成を前提としていますが、直接habakiriテーマ内に作っても大丈夫です ①専用のphpを作る habakiri子テーマフォルダの中に、親フォルダ内から「page.php」をコピーしてきます。 １のファイル名を「page-test.php」（testは任意）と変更します。 サーバーのharakiri子テーマフォルダ直下にアップロードします。 ②固定ページでテンプレートを選択する 「page-test.php」で作った場合は、テンプレート一覧に「test」というものが追加されているはずなので、それを選択します。 以上になります！

wordpressテーマ「habakiri」のカスタマイズ方法は情報があるようで全く無い… ヘッダーメニュー（グローバルメニュー　gnav）が、画面のどのサイズからハンバーガーメニューに切り替わるのかは 「設定」「レイアウト」「グローバルナビゲーション」から 「オフキャンパスナビゲーションに切り替えるブレイクポイント」という設定はあるのだが、初期設定では「常に」か「タブレットサイズ」か「ノートサイズ」しかないわけで。 そこでまず強引にでも、と調べた結果、以下の場所をいじれば一応変えられることが確認できた。 ■親テーマの「function.php」一番最後の方にある 行数：655辺り /** * Return the breakpoint when switching responsive_nav <> offcanvas_nav * * @return int */ public static function get_gnav_breakpoint() { $breakpoint = null; $gnav_breakpoint = Habakiri::get( 'gnav_breakpoint' ); switch ( $gnav_breakpoint ) { case 'md' : $breakpoint = 992;←ここを768とかにする break; case 'lg' : $breakpoint = 1200; break; } return $breakpoint; } やってることは、設定で「タブレットサイズ」を選んでいたら「md」の横幅でブレークしますよ。 「ノート」にしてたら「lg」の横幅でブレークしますよ。 てことです。 「md」とか「lg」は、ご存知「habakiri」が採用しているbootstrapのカラム指定時のアレです。 ということで、設定で「タブレットサイズ」を選んでおいてから、上の場所を「768」にしておけば、ウィンドウサイズが768でブレイクポイント＝ハンバーガーメニューが出るということです。 ただし、自分の場合は子テーマでグローバルメニ...

habakiriは「アクションフック」と「フィルターフック」が豊富にあってカスタマイズ便利と書いてますが、具体的にどんなことをどこに書けばいいか分からない！デザイナーだから！そしてかなり調べてもなかなか出てこない！ 親のfunction.phpに書いてある151行目「Register widget areas」を子のfunciton.phpにコピペして、内容だけ変えてみても、やはり競合して表示できない。 親のregister_sidebarを子テーマのfunction.phpでremove（削除）した後に、親テーマの内容＋追加分を記載するやり方も載っていたが、それだとhabakiriテーマがアップデートした時に変更があったらなんか怖い…。 そこで、本来のwordpressのアクションフックを使って普通にウィジェットエリアを追加することで解決しました。 ■子テーマのfunciton.phpに以下を追記する（子テーマを定義している箇所の後ろ） //親テーマのウィジェット読み込み後、子テーマのウィジェットを追加する add_action( 'init', 'add_sidebar' ); function add_sidebar(){ register_sidebar( array( 'name' => __( 'Footer-menu', 'habakiri' ), 'id' => 'footer-menu-area', 'before_widget' => '<div id="%1$s" class="widget footer-menu-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="footer-menu-widget__title">', ) );...

■Wordpressテーマ「habakiri」の子テーマで、固定ページ、個別ページ（投稿ページ）、その他ページのヘッダーに表示される画像を変更する。 ・カスタマイズ前の状態では、各ページのヘッダー画像は固定で１枚に決まってしまっているので、固定ページの「アイキャッチ画像」に選択した画像をヘッダー画像として表示します。 ・もし親ページがある場合は（子ページの場合は）親ページのアイキャッチ画像を表示する。 ・ それ以外のページ（４０４ページや検索ページ）の場合は、指定のページのアイキャッチ画像を表示する。 ■変更するファイル wp-content/themes/habakiri-child/inc/class.entry-meta.php （habakiri-childのフォルダ名は作成した際の子テーマのフォルダ） ■変更する箇所 行番号：26 あたりから、Display page header の設定場所が始まる。 行番号：34 でphpが終了した後辺りに、以下を追加します。 <?php global $post; $parent_id = $post->post_parent; if(get_the_post_thumbnail_url()): ?> ↑の説明 $parent_idに、親IDを代入 get_the_post_thumbnail_url()で、アイキャッチ画像が設定されているかどうか確認 <style> /*get_the_post_thumbnail_url*/ .page-header{ background:url(<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>); background-size:cover; } </style> ↑の説明 アイキャッチ画像が設定されている場合は、.page-headerのclassにbackgroundで自分のページget_the_ID()のアイキャッチ画像を指定してます <?php elseif( is_page() && $parent_id...

■function.php function Include_my_php($params = array()) {     extract(shortcode_atts(array(         'file' => 'default'     ), $params));     ob_start();     //include(get_theme_root() . '/' . get_template() . "/news.php");     get_template_part($file);     return ob_get_clean(); } add_shortcode('myphp', 'Include_my_php'); ■news.php <?php $posts = get_posts('numberposts=5&category=1'); global $post; ?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <?php the_time('Y/m/d'); ?> <span class="label label-<?php $label = get_the_category(); $label = $label[0]; { echo $label->category_nicename; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span><b...

wordpressで独自サイトを作成しようとすると、数あるテンプレートからよさそうなものを選んでも、結局カスタマイズが必要になって、phpやら何やらテーマの中身をいじらなければならない現状から、使うことを控えていたが、どうしても投稿（特にお知らせ・最新情報）などをユーザーにお任せする場合は優秀なので、後から自分が分かりやすくカスタマイズできるような模索をしていました。 元々bootsrtapベースで１からテンプレートを作成しようとしたところ、メニューやらウィジェットやらの設定がかなり複雑だったので、それではとbootstrapベースの、しかもカスタマイズしやすいテーマ「habakiri」を使って、そこから諸々カスタマイズしようというところに落ち着きました。 具体的によくあるカスタマイズしたい部分を勉強しながら解析していったので、メモとして残そうと思います。