子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
ノードと要素は別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 12日目） | Ginpen.com
ここで el に上記 <ul> が格納されているものとすると、 el.firstElementChild は最初の <li> になります。想定通りと思います。一方 el.firstChild はというと、 <ul> と最初の <li> の間の「改行とインデント」から成る文字列ノードが格納されています。そう、文字列もノードです。 デモ 他にもこんな感じで「ノード全種から取得」するものと「要素ノードの中から取得」するものとがあります。 parentNode vs parentElementNode children vs childNodes firstChild vs firstElementChild lastChild vs lastElementChild ? previousSibling vs previousElementSibling ? nextSibling vs next
ツリーを歩き回るならTreeWalkerはどうかな。（DOMおれおれAdvent Calendar 2015 – 14日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 14日目分 TreeWalkerというオブジェクトがあります。その名の通り、（DOMの）ツリーを歩き回るオブジェクトです。 例えばこんな構成。（インデント等によるテキストノードはないものとします。） div#root + div#el-1 + div#el-1-1 + div#el-1-1-1 あるノード(#root)を起点に、長子の子孫を巡り（#el-1→#el-1-1→#el-1-1-1）、また戻ってくる（#el-1-1→#el-1→#root）という処理が必要だとします。 普通に関連ノードを参照して移動していくコードはこんな感じです。 var origin = document.querySelector('#root'); var current = origin; // 子孫を巡る while (current.firs
compareDocumentPosition()で要素の位置を比較できるよ。（DOMおれおれAdvent Calendar 2015 – 16日目） | Ginpen.com
var origin = document.querySelector('#origin'); var parent = document.querySelector('#parent'); var result = origin.compareDocumentPosition(parent); console.log(!!(result & origin.DOCUMENT_POSITION_PRECEDING)); // => true console.log(!!(result & origin.DOCUMENT_POSITION_FOLLOWING)); // => false console.log(!!(result & origin.DOCUMENT_POSITION_CONTAINS)); // => true console.log(!!(result & origin.D
el.closest()で直近の要素を探せるかもね。（DOMおれおれAdvent Calendar 2015 – 04日目） | Ginpen.com
元の要素から上位（親とその親とそのまた親と……）の要素を走査して、セレクターに合致するものを返します。なければ null 。親だけじゃなくて元の要素自身も含みます。 ポリフィル 上位の要素を辿りながら .matches() で確認していけばよろしい。見つからない場合は null を返します。 function getClosest(el, selector) { var cur; for (cur=el; cur; cur=cur.parentElement) { if (cur.matches(selector)) { break; } } return cur; } ちなみに document は要素じゃないから対象外です。なので parentNode ではなく parentElement で辿る。 環境 IEでは未実装。 Androidも未実装。Android版Chromeでは実装済
【今さら聞けない】リダイレクトに関してのまとめ、301リダイレクト、302リダイレクト、Refresh、.htaccess | MITAMA DESIGN
ホームページを運用していると、サイト内でページを移設したり、ドメインを変更したり、CMSの導入によってアドレスが変更になったりで、旧URLから新URLへのリダイレクトをする場合がでてきます。リダイレクトをする目的都市は、旧URLを参照するユーザーに不便をかけないようにするためなのはもちろん、検索エンジンにURL変更を通知するためという意味もあります。今回は、そんなリダイレクトに関してなんとなくまとめておこうと思います。 リダイレクトをした方がいい理由 ユーザビリティの観点 ・旧URLをブックマークしていたユーザーがアクセスできなくなるため ・旧URLへのリンクからアクセスできなくなるため ・旧URLの検索結果からアクセスできなくなるため （リニューアル後暫くは旧URLも検索結果に登場してしまいます） SEOの観点 ・旧URLにリンクがついていた場合、その評価が引き継がれない ・新しいページ
gulp でディレクトリ構造を維持したコピー - アカベコマイリ
失敗談 & そこから得られた知見の記録。いままで gulp で複数ディレクトリの構造を維持してコピーするとき以下のようにしていた。 var gulp = require( 'gulp' ); gulp.task( 'copy', function() { gulp.src( 'src/*.html' ).pipe( gulp.dest( 'dest' ) ); gulp.src( 'src/css/**' ).pipe( gulp.dest( 'dest/css' ) ); gulp.src( 'src/js/*.js' ).pipe( gulp.dest( 'dest/js' ) ); } ); この処理だと gulp.dest が冗長なうえ同期実行のためにコールバック関数を呼び出す場合も個別に end/error イベントをハンドリングする必要があり面倒だ。それにもかかわらずこうしてい
WordPress get_posts()の検索条件で、ちゃんとpost_typeを設定する | doli blog
WordPress関数「get_posts」でちょっと悩んだのでメモ。 $argsに検索条件を設定して、条件に一致する投稿データを取得するわけですが。 カスタム投稿タイプ「製品情報（products）」を作り、 そこにカ … 続きを読む »
親カテゴリーに子カテゴリーのエントリーを表示させたくない
上記ですが、解決したのですが、指定したカテゴリーを降順、昇順したいため、 <?php if (is_category(array('1','2'))) { ?> <?php query_posts($query_string . '&order=DESC&orderby=date'); ?> <?php } else { ?> <?php query_posts($query_string . '&order=ASC&orderby=ID'); ?> <?php } ?> のように書いていたのですが、ご指示いただきましたコードを追記したところ、 <?php if (is_category(array('1','2'))) { ?> <?php query_posts($query_string . '&order=DESC&orderby=date'); ?> <?php } else {
ol要素の入れ子で親の番号を子に割り当てる方法
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。 HTMLマークアップ <ol class="list"> <li>タイトル1 <ol> <li>タイトルA <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> <li>タイトルB <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> </ol> </li> <li>タイトル2 <ol> <li>タイトルC</li> <li>タイトルD</li> </ol> </li> </ol> 完成イメージ 完成イメージでお分かりのとおり、子リストに親リストの番号が引き継がれています。 参考：デフォルトの表示 １．CSSの設定 親の番号を子に割り当てるには、次のCSSを適用します。 ol { counter-reset: section; } l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特定の親の固定ページに属する全ての子孫のリストを表示する
サーバーのフルパスを簡単に調べる方法
Flash Player の z-index - Enjoi Blog