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

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」を使って、そこから諸々カスタマイズしようというところに落ち着きました。 具体的によくあるカスタマイズしたい部分を勉強しながら解析していったので、メモとして残そうと思います。

wordpressのテーマ「Twenty Seventeen」を使ってみたのですが、ヘッダー画像（カスタムヘッダー画像）のサイズが、トップページと他のページではサイズが異なり、画像を上下左右最大限まで表示する必要があったので、その設定方法と苦労をメモしておきます。 １．まずは子テーマを作成します（これについては別途記載） ２．子テーマの「function.php」に以下を追加します。 // Eliminate twentyseventeen-front-page home css // フロントページのヘッダー画像を他のページと統一する add_filter( 'body_class', 'my_body_class',20 ); function my_body_class( $classes ) { unset($classes[array_search("twentyseventeen-front-page",$classes)]); unset($classes[array_search("home",$classes)]); return $classes; } フロントページの画像を表示するプログラムを、他ページと同様の扱いにしてしまいます。 最初はトップページ、サブページのヘッダー画像をそれぞれCSSを探って変更したのですが、 IEと他のブラウザで見え方が違ったりと色々苦戦しました。 ３．子テーマの「style.css」に以下を追加します。 .site-branding{ padding:30% 0 !important; height: calc(100vh - 104px); } .panel-image { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: 100%; position: relative; } .has-header-image.twentyseventeen-front-page .custo...