投稿者: Susumu Seino

プラグインなどでURLをリダイレクトする機能を持つものはたくさんありますが、ほんの少しの書きかえのためにプラグインを入れて保守の手間と不確実性を受け入れるのは長期的にリスクだと思い、functions.php で簡単な書き換えができるように調べました。 調べた時に有用そうだった記事や、大事だったことをまとめていきます。

add_rewrite_rule()

https://codex.wordpress.org/Rewrite_API/add_rewrite_rule

https://b-risk.jp/blog/2014/02/permalink-customize/

https://ja.wordpress.org/support/topic/add_rewrite_rule-%E3%81%A7%E3%80%81%E5%BC%B7%E5%88%B6%E7%9A%84%E3%81%AB%E5%AD%90%E9%9A%8E%E5%B1%A4%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

上記の記事は試してみたけど意図したように動かなかったソースや、それに対しての問題点やつまずきやすいポイントが対話形式でログがのこっているのでとてもわかりすかったです。 自分のカスタマイズする時の条件とまったく同じ記事に出会うことは少ないですが、同じ関数を使っている場合は「は！」と気付くこともあるのでおすすめです。 質問するのが早いかもしれませんが「わからないから質問してみよう」というのも慣れてないと中々やりずらいので、まずは関連の過去フォーラムからソースをあさるのは有用だと思います。

https://www.sofplant.com/blog/tech/permalink-customize-and-plugins/

固定ページでタクソノミーの一覧を出したい時、カスタム投稿のカスタムタクソノミーも含めて表示したい時はクエリーを上書きするか WP_Queryクラスを利用します。 1ページ目は指定通りに表示されますが２ページ目以降はうまく表示されないことがあるのでそこらへんの問題を解決できそうなヒントになる記事をまとめていきます。

https://qiita.com/SwuBHj8aKGqBKHet/items/a9ed6117266e3adc8025

https://wordpress.stackexchange.com/questions/254199/pagination-when-using-wp-query

https://www.wpblog.com/use-wp_query-to-create-pagination/

上記の参考URLをもとに必要としてた環境で実装したソースは下記です。 functionsp.php

<?php
function wp_query_pagination( $pages = '', $range = 4 ) {
    $showitems = ( $range * 2 ) + 1;

    global $paged;
    if ( empty( $paged ) ) {
        $paged = 1;
    }

    $nextpage = $paged + 1;
    $prevpage = $paged - 1;

    if ( $pages == '' ) {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if ( ! $pages ) {
            $pages = 1;
        }
    }

    if ( 1 != $pages ) {
        echo "<div class=\"pagination\">";

        if ( $paged > 1 ) {
            echo '<a href="' . get_pagenum_link() . 'page/' . $prevpage . '">前へ</a>';
        }
        if ( $pages > $paged ) {
            echo '<a href="' . get_pagenum_link() . 'page/' . $nextpage . '">次へ</a>';
        }

        echo "</div>\n";
    }
}

page-〇〇.php

<?php
get_header();
$post_terms_slug = $post->post_name;

?>
<header>
    <p>リスト数
        <small>
            <?php
            $list_term_loop = array(
                'post_type'   => array( 'custom_post01', 'custom_post02' ),
                'post_status' => 'published',
                'tax_query'   => array(
                    'relation' => 'OR',
                    array(
                        'taxonomy'         => 'custom_taxonomy01',
                        'field'            => 'slug',
                        'terms'            => $post_terms_slug,
                        'include_children' => true,
                        'operator'         => 'IN'
                    ),
                    array(
                        'taxonomy'         => 'custom_taxonomy02',
                        'field'            => 'slug',
                        'terms'            => $post_terms_slug,
                        'include_children' => true,
                        'operator'         => 'IN'
                    ),
                ),
                'numberposts' => - 1
            );

            $num = count( get_posts( $list_term_loop ) );
            echo $num;
            ?>件
        </small>
    </p>
</header>

<div class="new-arrival-post-list">
    <h2 class="post-list-title">
        <?php the_title(); ?>
    </h2>
    <ul class="posts">
        <?php
        $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

        $term_loop = new WP_Query( array(
            'paged'       => $paged,
            'post_type'   => array( 'custom_post01', 'custom_post02' ),
            'post_status' => 'published',
            'tax_query'   => array(
                'relation' => 'OR',
                array(
                    'taxonomy'         => 'custom_taxonomy01',
                    'field'            => 'slug',
                    'terms'            => $post_terms_slug,
                    'include_children' => true,
                    'operator'         => 'IN'
                ),
                array(
                    'taxonomy'         => 'custom_taxonomy02',
                    'field'            => 'slug',
                    'terms'            => $post_terms_slug,
                    'include_children' => true,
                    'operator'         => 'IN'
                ),
            ),
        ) );

        while ( $term_loop->have_posts() ) :$term_loop->the_post();
            echo '<li>';
            the_title();
            echo '</li>';
        endwhile;
        ?>
    </ul>
    <div class="posts-nav-link">
        <?php
        if ( function_exists( "wp_query_pagination" ) ) {
            wp_query_pagination( $term_loop->max_num_pages );
        } ?>
    </div>


</div>


<?php get_footer(); ?>

Fish shell でanyenvを使うときのパス情報です。 下記を.config/fish/config.fish 内に記述し再起動することでanyenvを経由したrbenv や nodenv, phpenv を使うことができます。

https://gist.github.com/patorash/b5a1033c08d2c4df103457866b2dcaa2

パス情報を記述したあとに which php や which ruby でどのパスが通っているのかの確認も忘れないように！

https://hi120ki.github.io/blog/posts/20190125/

https://scrapbox.io/makinoshi/fish%E3%81%A7anyenv%E3%82%92%E4%BD%BF%E3%81%86

JavaScript を使って自サイトのドメインや「/ (スラッシュ)」から始まる相対パスの最後にパラメーターを付与する方法について、実装時に調べたことや方法などをまとめます。 今回は WordPress のテーマに実装し jQuery が組み込まれているので、jQuery を利用している前提で進めています。そのため jQuery(function ($) { 処理 } といった書き方をしています。

jQuery(function ($) {
  $(function () {
    // anchorsにaタグを配列ですべて格納
    const anchors = document.getElementsByTagName("a");
    // 条件判定用のURLを取得
    const matchStr = document.domain;

    for (let i = 0; i < anchors.length; i++) {
      // アンカータグを変数に格納
      const linkElement = anchors[i];
      // hrefの中身を変数にとりだす
      let linkUri = linkElement.getAttribute('href');
      // 空じゃなければ次へ
      if (linkUri) {
        // 条件判定用のURLを含んでる、もしくはスラッシュで始まっていれば
        if (linkUri.match(matchStr) || linkUri.startsWith('/')) {
          // 末尾にスラッシュがあれば削除
          linkUri = linkUri.replace(/\/$/, '');
          // パラメータを付与して配列に戻す
          anchors[i].href = linkUri + "?from_app=true";
        }
      }
    }
  });
});

WordPress のテーマに実装する場合はこのままペタッとはればok。

参考記事

http://cly7796.net/wp/javascript/location-url/

https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter

https://stackoverflow.com/questions/9075540/how-to-create-conditional-hyperlink-in-html

https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

PHPやNode.jsのバージョンを管理するenv系ツール

ローカル環境で開発する時に開発する時に利用する環境によってPHPやNode.jsのバージョンが異なることがあります。そんな時に使う一般的な手法としてphpenvやnodenvを使いあらかじめダンロードし、使いたいバージョンに簡単に切り替える方法があります。 そのような○○envといったツールをまとめて管理できるanyenvのインストール方法と Fish Shell を利用したパスの方法をまとめていきます。参考は下記の記事です。

https://hi120ki.github.io/blog/posts/20190125/

Homebrewからanyenvをインストール

まずは前提としてmacOS 用パッケージマネージャー「Homebrew」が正しく入っていることを確認しましょう。

https://brew.sh/index_ja

$ brew tap anyenv/anyenv
$ brew install anyenv

まずは正しい場所から anyenv をダウンロードするためにtapをおこない、installコマンドで anyenv をインストールします。

$ anyenv -v                                                         

上記のように anyenv のバージョンを調べるコマンドを実行し「anyenv 1.1.0」などと表示されればインストールは完了です。

anyenvの初期設定をする

anyenvを使うためにはanyenv経由でインストールしたPHPやNode.jsへ正しいパスが通されてなければいけません。Fish shellのパスの記載方法は文法がことなるのでBashとは違い下記のように ~/.config/fish/config.fish へ記載します。

# ~/.config/fish/config.fish
set -x PATH $HOME/.anyenv/bin $PATH
anyenv init - | source

Fish shellの設定ファイルにパスの記載が完了したら後述のコマンドでシェルを再起動しましょう。

$ exec $SHELL -l                                            

再起動すると僕の環境では添付の画像のように表示されました。 メッセージにしたがって後述のコマンドを実行します。

$ anyenv install --init

その後に「Manifest directory doesn’t exist: /Users/susumu/.config/anyenv/anyenv-install Do you want to checkout ? [y/N]」と表示されるので「y」と入力してエンターを押します。最後にCompleted!と表示されれば初期設定は完了です。

nodenvのインストールと使い方

次にインストールしたanyenvを使ってnodenvをインストールして実際にNode.jsをインストールしていきます。

$ anyenv install nodenv                                                 

前述のコマンドを実行して「Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.」と表示されたら支持のとおりにシェルを再度、再起動します。

$ exec $SHELL -l                                             

再起動したらnodenvが正しくインストールされたかバージョン確認のコマンドを実行します。

$ nodenv -v                                                         

「nodenv 1.3.0」のようにバージョンが表示されればインストールは完了しています。インストールが可能なバージョンの確認や使い方はより詳しく記載されている後述の記事などを見てください。

https://qiita.com/daskepon/items/e47f7ee3ade252cdf2e6

### Node.jsの10.10.0バージョンをインストール
$ nodenv install 10.10.0

### 正しくインストールされているか確認
$ nodenv versions

### バージョンを指定して切り替え
$ nodenv global 10.10.0

### Node.jsのバージョンが切り替わっているか確認
$ node -v

前述のようなフローでNode.jsの指定バージョンをインストールし、正しくインストールされているか確認したら切り替えてバージョンを確認すれば完了です。

concrete5 japan の代表の菱川さんが未経験者を採用する時に教えることのカリキュラムをメモってたのを思い出してチームメンバーに共有するために記事をシェアしたのですが、WordPress を主戦場とする僕としてはちょっとカスタマイズしたかったのでパクリながらオリジナル風に書きます。 また、新たにヘルプしてくれる仲間に事前知識をいれておいてほしくて「こんな事を自己学習しといてね」って言えるようなドキュメントを目指しています。

https://twitter.com/HissyNC/status/1109958156921126912

担当してもらう予定の領域

• HTML/CSS コーディング
• JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度）
• WordPress のテーマ開発 (HTMLをWordPressテーマの組み込み)

基本的には変わらずです。最後の WordPress のテーマ開発がくわわったくらいかな。

本人のスペック

こんな人だったらokってことかな？これの対象者ってことっぽい。今回の僕のパターンでは昔インフラエンジニアをかじったけど今ホストをやっている人ということであまり参考にならないので書かなくていいか。いや、ちょっと書いとくか

• インフラエンジニアだったので黒い画面の基本コマンドは分かる
• PC,Macの操作は慣れている
• HTML,CSS,JSには明るくない

んーこんなところかな

カリキュラム

その1

• Macのセットアップ
  • うちもMacが標準OSなのでMacのインストールと設定はやってもらう
  • 自分でいろいろいじって使い心地に慣れてもらう
• appear.inやZoomのビデオ会議ツールの説明とテスト
• Slack,Backlogコミュニケーションツールの説明
• エディタの導入と説明

その2

ここらへんはほぼパクリかな。うちの場合は Progate_ や ドットインストールを使って覚えてもらう感じです。

https://dotinstall.com/

https://prog-8.com/

• Web開発の基本を解説（座学）
  • ファイルの扱い
  • HTMLの基本
  • CSSの基本
  • JavaScriptの基本
  • ウェブサイトの公開
  • ウェブのしくみ
• HTMLの基礎を解説（座学）
  • HTMLをはじめよう
  • head には何が入る? HTML のメタデータ
  • HTML テキストの基礎
  • HTML要素の一覧
• マークアップしてみる
  • ローカルの環境で実際にコーディングしてみるフローも分かるようにやってみる
• CSSの基礎を解説（座学）
  • CSSの構文
• スタイルを付けてみるマークアップしてみたHTMLの見出しなどを、世田谷区サイトに似せて付けてみる

その3

だめだ…。ココらへんでこの記事を書くのに挫折しそうになっている。だんだん適当になってきいます。

• Homebrew でツールをインストール
  • Gitのインストールと説明
  • MySQLのインストールと説明
  • Node.jsのインストールと説明
• WP-CLIのインストールと説明

その4

冒頭に紹介した記事をなぞってパクる予定だったのに全然別物になってしまっている。 jQuery プラグインを導入してみる

• ヘッダーを作る
  • position を使ったレイアウトの練習
• ulを使ったナビゲーションのマークアップとスタイリング
  • 先頭のマークを消したり、縦に並べたり横に並べたりのアレ
• jQuery基礎（座学）
  • 社内外から今から教えるのにjQuery？というツッコミがあったが、既存サイトではまだまだ使われてるしconcrete5もまだjQueryに依存してるし…。いいじゃん、jQuery教えたって！
  • 資料は公式のjQuery Learning Centerを使います。

• jQuery プラグインを導入してみる
  • 実戦でよく使うライブラリに慣れておくことと、JavaScriptに対する恐怖感を和らげるため、簡単に動くというイメージを持ってもらう
  • Swiper – Most Modern Mobile Touch Slider : https://idangero.us/swiper/
  • liabru/jquery-match-height: a responsive equal heights plugin : https://github.com/liabru/jquery-match-height

その5

参考記事だと6日目。フリーのデザインデータをDLしてそれをもとにマークアップしてもらうらしい。 これは僕もよくやるんだけど、僕のチェック不足なのかうまくいかなくてオンジョブで進めちゃうことが多いんだよね。

なぜSketchかというと、タイポグラフィやカラーリングなどある程度のCSSはSketchが教えてくれるため、実習の時間短縮が可能だからです。カラーピッカーで色を取ったり、フォントサイズを合わせたりは、１回やれば十分。

https://qiita.com/hissy/items/e781a62ff6521803a230

• Sketch or Photoshop の基本的な使い方
  • スタイルの取り方とパーツの書き出し方程度
• Flexboxの解説
  • A Guide to Flexbox
• CSSでの実現手法についてディスカッション
• 黙々と作ってみる
  • 余白、フォントサイズ、グリッドについて、デザインと実装の差分について逐次指摘して直させる

その6

もう疲れてちゃって最初の目標とはずれてきてしまっているけど後少し。とりあえずお7日目の内容をコピーして貼って、少しカスタマイズします。

• フォームのマークアップの概要（座学）
  • HTMLフォームガイド
• 引き続き黙々とコーディング
  • 随時デザインとの違いについて指摘
    • ピクセルパーフェクトの話をする
    • こんなのもあるらしい『PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ | HPcode : https://haniwaman.com/perfect-pixel/』
• 納品クオリティの担保
  • 入れるべきChrome拡張
    • HTMLエラーチェッカー
      • 閉じタグ漏れなど、初学者にありがちなミスをサクッと指摘してくれるため、重宝します。
    • HTML5 Outliner
      • マークアップにあたっては、デザインの再現だけでなく、文書構造としても適切であることが求められます。アウトラインを可視化できるこのツールは非常に便利です。
    • Web Developer
      • JavaScript を無効にした状態での確認、ブラウザデフォルトCSSの無効にした状態での確認、alt属性値の可視化、あたりが初学者にとって必要な機能ですが、それ以外にも様々な便利な機能があり、フロントエンドエンジニア全てにおすすめできる拡張かなと思います。
  • バリデータ
    • HTMLバリデータ
    • CSSバリデータ
• セマンティックの基礎
  • HTMLでのセマンティクス

その7

参考記事が8日目で終わりかと思ったらまだあった…。ちょっと集中力の限界がきています。 その後は実際に WordPress のサイトの組み込みに進んでいきたいのですが、ワークフローも大事だと思うのでワークフローとテンプレートタグ、テンプレート階層などが理解できる教材を調べて送ります。 Schoo (スクー) という動画のオンラインスクールで昔にちょっと出た教材などがあったので、そちらがおすすめ。

https://schoo.jp/class/3482

https://schoo.jp/class/2626

それ以外には執筆した書籍を渡して読んでもらう感じにします。

https://www.amazon.co.jp/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E3%81%A4%E3%81%8F%E3%82%8B-WordPress%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80-%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E3%81%8B%E3%82%89%E7%B4%8D%E5%93%81%E3%81%BE%E3%81%A7%E3%81%AE%E3%81%AF%E3%81%98%E3%82%81%E3%81%AE%E4%B8%80%E6%AD%A9-Design-IDEA/dp/4797383305/ref=sr_1_30?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=wordpress&qid=1558687039&s=books&sr=1-30

ってな感じで以上になります！

アーカイブページのテンプレートを作成する時に、1枚目と2枚目でテンプレートの表示を変更したい時に使う条件分岐の条件はis_paged関数を利用します。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_paged

is_paged関数では現在のページ番号が1より大きいかどうかをTRUEまたはFALSEで返します。対象は複数にわけられたアーカイブやメインのページで、固定ページや投稿ページのnext-pageタグで分割されたものは含まれません。

<?php if ( is_paged() ) : ?>
    2ページ目以降の表示
<?php else : ?>
    1ページ目の表示
<?php endif; ?>

前述のサンプルコードをarchive.phpに記載することで、アーカイブページの1ページ目と2ページ目以降の表示を切り替えることができます。

WordPressの一般設定にある“1ページに表示する最大投稿数”を指定するとメインループの投稿表示数を変更することができます。しかしカスタムポストタイプなどを作成するとそれぞれの投稿タイプでテンプレートのデザインが違い、カラム数に応じて出したい記事数も変わってきます。 そんな時は条件を指定してpre_get_postにアクションフックをかけるとよいでしょう。実際に動くコードは下記の通りです。

function column_per_page( $query ) {
    if ( ! is_admin() && $query->is_main_query() && is_post_type_archive( 'column' ) ) {
        $query->set( 'posts_per_page', '8' );
    }
}

add_action( 'pre_get_posts', 'column_per_page' );

前述のサンプルコードではcolumnという投稿タイプを作成した時にcolumnというページではpost_per_page (1ページあたりの最大表示数) を8記事にするという記述です。 ページネーションの動きなどでメインループの回数を上書きたい場合はfunctions.phpに前述のサンプルコードを記載し一括で管理するとよいでしょう。

https://stackoverflow.com/questions/18968916/unlimited-posts-per-page-for-a-custom-post-type-only

2008年にジョブスやベゾスとともに「インターネットで最も影響力のある25人」に最年少の24歳で選ばれた、WordPress の生みの親 マット・マレンウェッグ氏が “分散型” の働き方についてポッドキャスト[ Distributed ] をはじめました。

PodcatsのURLはこちら
‎Distributed, with Matt Mullenweg on Apple Podcasts

https://twitter.com/naokomc/status/1129173328822800384

また前述のポストで マット氏は分散化の働き方について書いています。WordPress や自身が創業者である Automattic社を例にだし、どのようなプロジェクトが可能であったか・会社が経営可能かという可能性と恩恵について語っています。

While the early companies of Silicon Valley started out in garages and cramped workspaces, WordPress was being built without any offices at all. シリコンバレーの初期の会社はガレージや窮屈な作業場から始まりますが、WordPress はオフィスを全く持たず構築されました。

WordPressは私に分散作業の力を見せてくれました。 学習したことを共有する時が来ました。 – Distributed.blog

Automattic では68カ国 900名の社員がおり、業務は全てオンラインで完結します。「分散方の働き方を受け入れない経営者は取り残される」とし、テレワーク・リモートワークなどの分散型の働き方について情報共有する時がきたと書いています。 第一回 Distributed のゲストは180カ国で事業を展開するクラウドソーシング会社 Upwork のCEOである Stephane Kasriel氏 が登場し、フリーランサーの働き方やベネフィットについて語っています。 またパーソナリティを務める マット・マレンウェッグ の話す家で働くことがなぜビジネス上で良いことがあるかをTEDの『Why working from home is good for business』で語っています。

https://www.ted.com/talks/matt_mullenweg_why_working_from_home_is_good_for_business