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

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でブレイクポイント＝ハンバーガーメニューが出るということです。 ただし、自分の場合は子テーマでグローバルメニ...