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

なんとなくすぐ忘れるのでメモ。 http://ドメイン/wordpress/　にwordpressをインストールしたとする。 管理画面の「設定」「一般」にある 「WordPressアドレス（URL）」は「http://ドメイン/wordpress」となっている。 「サイトアドレス（URL）」は「http://ドメイン/wordpress」となっている。 この「サイトアドレス」を「http://ドメイン/」に変更して、このアドレスにアクセスしたときにホームページ（トップページ）を表示したのだ。 ①まず、FTPソフトなどで以下から２つのファイルをDLします。 ・index.php ・.htaccess ②DLしたファイルのうち「index.php」を以下のように変更します。 17行目あたりの require( dirname( __FILE__ ) . '/wp-blog-header.php' ); ↓ require( dirname( __FILE__ ) . '/wordpress/wp-blog-header.php' ); インストールディレクトリを見てね、というおまじない ③実際に表示したい場所「http://ドメイン/」に２つのファイルをアップロード ④WP管理画面で「サイトアドレス（URL）」を「http://ドメイン/」にして保存 以上！！ 管理画面へのアクセス自体もドメイン直下にしたい場合は別の方法があるので別途記載します。

プラグインを使わずに、自作のパンくずリストを表示させます。 投稿ではカテゴリーの親、タグの親。固定ページでは固定ページの親も表示させます。 そして見た目はbootstrapのスタイルを使用します。 できれば子テーマの ■function.php /* パンくずリスト */ function mytheme_breadcrumb() { //HOME>と表示 echo '<ol class="breadcrumb">'; echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>'; //投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示 $cats = ''; $cat_id = ''; if ( is_single() ) { $cats = get_the_category(); if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id; } else if ( is_category() ) { $cats = get_queried_object(); $cat_id = $cats->parent; } $cat_list = array(); while ($cat_id != 0){ $cat = get_category( $cat_id ); $cat_link = get_category_link( $cat_id ); array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' ); $cat_id = $cat->parent; } foreach($cat_list as $value){ echo '<li>...

メディアアップローダーで画像をアップロードした先のURLを変更したいと思い調べました。 残念ながら現段階では、「フォルダを複数に分けてメディアアップローダー上からフォルダを選んで」というのは難しそう。 http://ドメイン名/インストールフォルダ名/wp-admin/options.php という形式でアクセスすると、裏管理画面みたいなものが表示されます。 下の方に（アルファベット順に並んでいる）↓の2つの項目が並んでいるので 「upload_path」 「upload_url_path」 upload_path　には　「/images」　（「http://ドメイン名/images/」としたい場合） upload_url_path　には　「http://ドメイン名/インストールフォルダ名/images」 そして最下部の「変更を保存」を押して、通常の管理画面に戻れば 管理画面の「設定」→「メディア」のページで 「アップロードするファイルの保存場所」 「ファイルへの完全なURLパス」 という項目が追加され、そこで現在設定しているパスを確認することが出来るようになります。

①カスタムフィールドの中身を独自データベースへ登録する ②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する ・メディアアップローダーを使用して画像のURLを独自DBに登録する ・画像登録は2箇所作りたい ③独自データベースは2個作りたい ④登録したカスタムフィールドの中身を取得してコンテンツ内に表示する ①はこちらの記事で取り上げた中身になります。 ②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する https://gist.github.com/sushat4692/33df8a65474798fca0c6 こちらの記事の方法を参考に、①の際に作ったカスタムフィールド＆新規DBのソースと混ぜ合わせる必要があります。 「admin-media.js」がメディアアップローダーを使用してくれる動きをしてくれる。 「admin.css」これは今回使いません 「function.php」この中でカスタムフィールドを作成している部分があるが、カスタムフィールドを作成するところは①のプラグインとして作成してしまっているので、ソースの一部を参考する形になります。 １．「function.php」で画像の登録・表示処理をしている部分を、①のプラグイン「custom-meta-field1.php」に追記します。 function.phpにある[36行目]〜[50行目]を、プラグイン側の画像登録を表示したい箇所にコピペします。 プラグイン側のtableのtd内にコピペです。 <td> <div class="custom-media" data-type="image" data-title="画像" data-target="#field-image"> <input type="text" id="field-image" class="my-uploader__url widefat" name="street_img" value="<?php echo $str...

カスタムフィールドを作成して、その中身をDBに登録→取得して画面に表示するだけなら「Advanced Custom Fields」のプラグインだけで可能。 ■Advanced Custom Fieldsのプラグインで中身を取得・表示 １．プラグインをインストール ２．メニューの「カスタムフィールド」から新規追加 ３．投稿画面に表示するための「ラベル」とそれを格納・取得するための「名前」等を決める ４．画面に表示する際には「content.php」等、表示した場所で $shop_name = get_field('shop_name',$post_id); get_field(名前,ページID)として取得可能。 自分の場合は上記のように一度関数に代入してから、表示した場所で <?php echo $shop_name; ?> としている。 ★今回、管理画面上の投稿でカスタムフィールドにて登録した内容をあとからCSV一括登録・変更などでいじりたい、というのがあったが、このプラグインを追加って登録した内容は、DBのpostの中に１つのカスタムフィールド項目に対して必ず２つの内容が登録されることが発覚。 【DB内】wp_postmeta meta_id post_id meta_key meta_value 1 1 shop_name ○○商店 2 1 _shop_name field_****←英数字の羅列 この２行が無いと中身を取得出来ないようで、特に２行目の内容を持って別のカテゴリーやタグ、post_idと紐付けを行っているようだったので CSVからの登録プログラムを作成することがかなり困難に。 そこで、カスタムフィールドを自作し、かつDBも自作し、そこへ内容を登録する方法へ変更。 ■自作のDBを作成し、カスタムフィールドから登録するプラグイン ・wordpressに自作DBを追加する方法は以下サイトを参考に https://www.webopixel.net/wordpress/637.html １．Gistにアップされていたソースを丸々コピーして、「custom-meta-table.php」の名前で保存 ２．自分環境に合わせてカスタムフィールドを作成（html手作業） ...

プレビュー状態とタグ入力との切り替えで、よくタグが勝手に削除されたり、または勝手に追加されたりします。 bootstrapを利用しようとした時や、独自にタグにスタイルシートを適用させたい時、aタグの中に別のタグを入れ子にしたい時、spanを使用したい時、pタグを勝手に付けたくない時には邪魔な機能になってしまいます。 普通に文章を入力する分にはいいですが、ちょっとデザイン的な事をやろうとするときにはこれらの機能を停止させるための記述が必要。 子テーマのfunction.phpに追加！ ■function.php //エディターで span div が削除されないように　aタグに入れ子可能に 自動でpタグで囲わないようにする function override_mce_options( $init_array ) { global $allowedposttags; $init_array['valid_elements'] = '*[*]'; $init_array['extended_valid_elements'] = '*[*]'; $init_array['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']'; $init_array['indent'] = true; $init_array['wpautop'] = false; $init_array['force_p_newlines'] = false; return $init_array; } add_filter( 'tiny_mce_before_init', 'override_mce_options' ); これでOK 参考元　https://qiita.com/jyokyok...

wp_link_pagesを使って投稿の「前ページ」「次ページ」を表示しているが、「お知らせ」のカテゴリーに含まれているものだけを対象にしたくて、色々と調べました。 そのまま設定する場合はいいのだが、 wp_link_pages( array( ’before’ => ’なんちゃら’, ’after’ => ’なんちゃら’, と、連想配列をしているので、 wp_link_pages(’なんちゃら’,’なんちゃら’,true) と指定出来なくて悩む。 調べてみると、before　after　のように指定している部分の trueを指定するべき連想配列の名前は「in_same_term」だとわかったが、 wp_link_pages( array( ’before’ => ’なんちゃら’, ’after’ => ’なんちゃら’, ’in_same_term’ => ’true’, としても動いてくれない…。 ★解決しました！！ wp_link_pagesは、ページ内で分割された部分へのリンクを設定する箇所で、自分が作業していたcontent-**.phpで設定するものではありませんでした。 実際には、single.phpの中にある the_post_navigation　のところ。 the_post_navigation( array( ’in_same_term’ => true )); にしたらうまくいきました！！やったー！

■投稿 //表示中ページの投稿ID取得 $post_id = get_the_ID(); ※$post_id = get_ID();としてしまうと、get_ID()の数字がそのまま表示されてしまう //表示中ページの投稿タイトル取得 $thetitle = get_the_title(); //表示中ページのカテゴリー名取得 $this_tag = single_cat_title(); ■カテゴリー //カテゴリー情報を取得 $cats = get_the_category(); //カテゴリーへのリンクを取得 $cat_link = get_category_link($cats[0]->term_id); //カテゴリー名を取得 $cat_name = $cats[0]->cat_name; ■タグ //タグ情報を取得 $tags = get_the_tags(); //表示中のタグスラグを取得 $tag_slug = $tags[0]->slug; //タグの名前を取得 $tag_name = $tags[0]->name; //タグアーカイブへのリンクを取得 $tag_link  = get_tag_link($tags[0]->term_id); //表示中ページのタグスラグを取得 $this_tag_slug = get_page($this_id); $this_tag_slug = $this_tag_slug->post_name; ・テンプレートファイルの優先順位 tag-スラッグ名.php tag-ID番号.php tag.php archive.php index.php ■カスタムフィールド //カスタムフィールドの内容を取得 $custom = get_field('名前',$post_id); ■よく見る「ループ外で使う」「ループ内で使う」の意味とは？ ・ループ外 現在表示中のページ情報（ID）を元に情報を取得する場合は、ループ外で使うということ。 ・ループ内 ページ内で、複数記事を表示するための「foreach($posts as $post):」などを使用した際、その中で記事ご...

１．プラグインをインストール ①SiteGuard WP Plugin ・大体のセキュリティ設定をやってくれる 【設定内容】 インストール・有効化すると、まずはログインURLが変更されます。 プラグイン画面の上部「ログインURLを変更」をクリックし、任意のURLを指定。 管理画面へのアクセス制限を「ON」 画像認証「ON」 「XMLRPC防御」で「XMLRPC無効化」を選択して「ON」 ②Edit Author Slug ・ユーザーIDを偽装させてログインIDを分かりにくくする 【設定内容】 インストール・有効化します。（個別設定メニューは表示されません） 「ユーザー」から各ユーザー編集画面に入ると、最下部に入力画面が表示されます。 「投稿者スラッグ」の所で、ユーザー名でもパスワードでも無い名前をつけます。 念の為、『ニックネーム（必須）」の所に、任意の名前を入力します（管理者 など） 「ブログ上の表示名」のプルダウンを選択すると、４で設定した名前が選択できます。 これは、投稿ページに表示される名前を変更する方法でもありますが、ここを変更しないとそもそも投稿ページにユーザー名、つまりログインIDがそのまま表示されてしまうことになるので、変更は必須です。 また、何故ユーザーIDを変更するのかというと、 「http://＊＊＊.com/ ?author=1」というようにURLを入力すると、ユーザー番号１番の人のユーザーIDが丸見えになってしまうのです。 元々は、「ユーザー１番の人の投稿まとめページ」としても意味合いなのですが、ここでユーザーID、つまりログインIDが知れてしまったらあとはパスワードを総当りされてしまうということ。 そこで、今回のプラグインを追加することにより、もしユーザーIDが見られてしまったとしても、それは３で設定したログインIDとは全く別のものが表示される、という仕組みです。 ③function.phpに追記 ・ユーザーIDの表示を試みようとするアクセスURLを404ページエラーにする 【function.php】 //ユーザーIDの表示ページを404エラーにする add_filter( 'author_rewrite_rules', ...

wordoressテーマのアクセシビリティに対応した「basicstore」というテーマを導入し、子テーマを作ろうとしてつまずいたのでメモ。 ※basicstoreの子テーマを作るときは、通常のfunction.phpだと親のスタイルシートが反映されない！ 子テーマのテンプレートをダウンロードしても、本家や作成元を見ても駄目…。 そこで試行錯誤した結果、やっと怪しいエラーが出ずに親テーマのスタイルシートが反映出来るようになりました・ ①子テーマのフォルダ「basicstore-child」を作成 ②function.phpを作成 <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'style', get_template_directory_uri() . '/../basicstore/assets/css/basicstore.css' ); wp_enqueue_style( 'basicstore-main-style', get_template_directory_uri() . '/../basicstore/assets/css/theme.css' ); wp_enqueue_style( 'basicstore-wp-style', get_template_directory_uri() . '/../basicstore/assets/css/wp.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css'); } これは、親テーマのfunction.phpを覗いた時に「basicstore.css」と「theme.css」と「wp.css」を読み込んでいる箇所から引用し、かつ子テーマから見たときの階...

①親テーマのフォルダ名＋「-child」のフォルダを作成する 場所はwordpressをインストールしているディレクトリの「wp-content」＞「themes」の中。 親テーマと同じ階層。 「coldbox」なら「coldbox-child」 「basicstore」なら「basicstore-child」 ②function.phpとstyle.cssを作成する ■function.phpの中身は <?php add_action( 'wp_enqueue_scripts', '***_enqueue_styles' ); function ***_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); } // テーマフォルダ直下のeditor-style.cssを読み込み add_action('admin_init',function(){ add_editor_style(); }); ?> エディタcss の読み込み前までで問題ないが、エディタでもサイトと同じ見栄えにする為、エディタ用のスタイルシートも読み込む設定をしておくと便利。 「***」の部分は親のテーマの名前を入れる。 ※親テーマによっては、funciton.phpに記載する方法が異なる事があります。 よく子テーマ作成で紹介されているのは、「theme_enqueue_styles」ですが、 「coldbox」の場合は「coldbox_enqueue_styles」になります。 「basicstore」の場合は「my_theme_enqueue_styles」になります。 「テーマ名　wordpress　child」で検索をかけると、子テーマファイルがDL出来るサイトが表示されるので、探してみましょう。 ■style.cssの中身は /* Template: *** Theme Name: ***-Child */ 「***」の　部分には親テーマの名前を入れる。 ③wordpressの...

・Gmailのアカウントを持っていないと送信エラーになるので注意 ・トリガーをフォーム送信にする ・スクリプト上で実行しても「TypeError: undefined からプロパティ「response」を読み取れません。」と言われるけど、そりゃそうですよ。「response」はフォーム送信時に初めて取得されるのだから。ということで気にしない。テストは実際にフォーム送信してメールが届くかチェックすればよい。 ・改行は「¥n」じゃなくて「¥n」としないと文字化けする。

・StableUpdateのデータを丸々上書きしてみる ・PHP3.5.1以降にしてくれといわれる ・xamppが172だったから最新の181をインストールする ・「Strict Standards」とかエラーが沢山出る ・xamppのphp.iniの「error_reporting = E_ALL | E_STRICT」ってところを「error_reporting = E_ALL」にするといいと言うから直して再起動 ・まだ治らない 今ここ

htmlのhead内に書きます！ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">

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-...

ウェブページが表示される画面サイズによって自動的に数値を入れるjavascriptを作成したのだが、androidタブレットのアプリ内webviewで表示した時に見栄えがどうもおかしかった。 androidのバージョンを調べたところ、4.2だった。 どうやら、4.2だとCSS3が使えないとのこと…。 更に、document.writeが対応しないという記事も見つけたので、代替え案を模索。 document.write(s); ↓ document.getElementById("WinSize").innerHTML = s; とすることで、無事表示される。 HTML側では、 <div id="WinSize"></div> とすることで、解決しました！

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の中にある文字などを追加できます。

さくらインターネットのレンタルサーバーでwordpressをクイックインストールする際、インストール先のディレクトリを指定しなければならない。 http://***.com/wp/  ←のように。 しかし、このままだと本来表示したいドメインに直接アクセスした場合はwordpressのトップページが表示されないので、よく見かけるのは、wp/の中にあるindex.phpと.htaccessをルートディレクトリへコピーして、なおかつ中身を変更する方法。 ただ、無事ページが表示されたのはいいものの、テーマ内のcssやjsを読み込む部分。 主にheader.phpの「get_template_directory_uri();」のところが、実はサブディレクトリへのパスが表示されてしまっていて、うまく動作しないという現象に当たった。 そして、どうやらsakuraのドメイン設定の中をいじれば、サブディレクトリ自体をドメイン直として指定することができるようなので。テストしてみた。 ■さくらサーバーでドメインを追加すると、その独自ドメインのディレクトリは↓のようになる home/アカウント名/www/独自ドメイン用フォルダ名/ そして、wordpressをインストールすると、以下のフォルダに格納される home/アカウント名/www/独自ドメイン用フォルダ名/wp 【よくあるやり方でやってみる】 1.wordpressのインストールフォルダ直下にあるindex.phpをコピーしてくる 2.同じく.htaccessをコピーしてくる 3.管理画面の「設定」→「一般」の 　「サイトアドレス（URL）」の方に、実際に表示したいURLを。 4.実際に表示されたいドメインのフォルダ直下に１と２をアップロードする 　※この時、index.phpの中身を以下のように書き換える １７行目あたり require( dirname( __FILE__ ) . '/wp-blog-header.php' ); ↓ require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' ); wpの部分は、インストールしたディレクトリ名。

固定ページごとにヘッダーやメインメニューを変更すると、投稿ページだけは基本のメインメニューやヘッダーが表示されてしまうので、こちらも変更する必要がありました。 ①メインメニューを増やす こちらを参照 ②投稿カテゴリーを判断して表示するメニューを変える １．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」を使って、そこから諸々カスタマイズしようというところに落ち着きました。 具体的によくあるカスタマイズしたい部分を勉強しながら解析していったので、メモとして残そうと思います。