機能シェアするTweetここ最近、WordPressをいじり倒すのにハマっています。投稿ページや固定ページ内に直接HTMLでガリガリコードを書けるようになってきたので、サイトの見た目を自分の思った通りの形に出来るようになってきたかなって。本格的にいじりだすと、今度はJavaScript、PHPやjQueryなんかも使い出してきますが、この辺は今まで使ってきたHTMLやCSSとは次元が違う難しさで、時にはかなりの時間を要する時も・・・。今回のソート機能の導入も、例によってなかなか苦戦したので、一応記録として残しておきたいと思います。jQueryでソート・絞り込み機能を作るソート機能が使えるMixItUpとは?このMixItUpっていうのは、他で紹介されているような記事一覧を並び替えたりするものではなく、記事内にあるコンテンツやdiv要素自体を、並び替えたり、フィルタリングしたりする機能を付けるアイテムになります。JSファイルを読み込ませる形で使うライブラリっていうモノになります。WordPress初心者にとってはこれの導入は少々ハードルが高めになっているかと。手順を解説すると、以下のような感じ。latest」からダウンロード。GitHub」からダウンロードできます。実際に使うのはdistファイル内にある2つのjsフォルダのどっちかです。ちなみに”.min.js”と”.js”の違いは容量が違うってだけで、どっちを使っても問題ありません。minの方はコメントや改行を削るだけ削って容量を減らしてるだけなので、特にこだわりがない限り、minでいいかと。MixItUpのアップロードで、このJSファイルをどうしたらいいか・・・?まずここでちょっと時間を使いました。僕の場合はWordPress内のテーマに導入するので、最初直接テーマ内に入れようかと思いましたが、WordPressファイル直下にご丁寧にJSファイルが置いてあったので、そこに入れることにしました。この辺はWebサイトのディレクトリの仕組みをわかってないと、ちょっと苦戦します。僕の場合はロリポップのサーバーを借りているので、「ロリポップ!FTPページ」からJSファイル内にアップロードしました。ロリポップだと、ワードプレス自体のファイルを弄る場合はこのページから操作します。この際に、あとで呼び出すために必要なパス(URL)をメモしておきます。MixItUpの適応ファイルに入れたら、あとは下のような感じで読み込みます。このサイトの方法でファイルにアップロードしているなら以下のようなURLでOK。src="/js/mixitup.js"></script>記事内のテキスト編集画面に直接コピペしても良いですし、テーマ編集画面のヘッダーPHP等にコピペしても大丈夫です。あと、念のために最新のjquery.jsをダウンロードしてJSファイルにアップロードするか、もしくは直リンクで同じようにリンクさせといたほうがいいかもしれないです。jquery公式:jquery.com読み込みはこんな感じで。src="http://code.jquery.com/jquery-○.○.○.min.js"></script>MixItUpの使い方この辺もけっこう苦戦しました。サンプルコードを探して、ようやく安定して使えるものを発見したので、貼っておきます。category-2">4カテゴリー2に属する</div></div></div></body>参考にさせてもらったサイトです。【jQuery】サイト内に今風な『ソート機能』を実装する方法かっこよくて気持ちいい!ページ内の要素を整列・抽出する「MixItUp3」がいい感じhead内にある”なにかの呪文”を安定して動作させるのに色々と苦戦しました。古いサイトに乗っているような変数代入方法ではうまく動作せず、謎のエラーが。そのため、いろんなサイトを巡って発見したコードです。コード内容としては、ざっくり以下のとおりです。category-1′′」の名前「category-1」部分をMixItUp3で読み分けてソートしたり、フィルタリングしたり後はこのコードを参考に自分で好きなようにカスタマイズすればOK。jQueryでソート・絞り込み機能を作る下手にファイルやサーバ側をいじりたくない人はこっちのほうが楽です。下が参考にしたサイトです。jQueryでリスト表示を絞り込む処理を実装するALLグループAグループBグループCグループAのなにかグループBのなにかグループCのなにかこちらはHTML、CSS、JSをそのまま記事内にコピペするだけで使えるので、非常に楽ですね。僕がMONAコインとかNEMとか大量に買ったオススメの取引所。公式ハードウェアウォレットの販売所はこちら。最近の仮想通貨ブームで、検索結果の一覧にそれに関連する情報がたくさん出るようになりました。僕個人としてはありがたいんですが、そういう結果...記事を読む『ポケモン赤』をマインクラフトで再現した人が現れる一応ここの記事で勘違いされないようにマイクラがどんなものか、内容も書いていきます。特徴や将来性、チャートなど度々仮想通貨のランキングをチラっと見るときがあるんですけど、最近になって、いきなりかなり上位の方に謎の仮想通貨?があることに気づきました。Catalina(カタリナ)にバージョンアップしました。バージョン...記事を読むGoogleのスプレッドシートにマクロ機能が追加4月11日、Googleはスプレッドシートに大きなアップデートを行い、マクロのサポートを開始したと発表しました。11にアップデートしたらiphone6の寿命が急激に短くなった話あらかじめ言っておきますが、これはあくまで個人の感想で、原因が100%これにあるとは断言しません。その可能性が高いという話です。...記事を読むメモを取るかのようにGIF動画をサクサク作れる無料ツール「LICEcap」がかなり捗る近年はユーチューバーなどの影響で、市場にある動画編集ツールに多様性が生まれてきて、あらゆる種類のソフトが編集機器が出てきています。...記事を読むGoogleにフリー画像の検索機能が備わっているので使ってみたすでに知り渡った情報かもしれませんが、最近のGoogleの画像検索機能では、著作権のないフリー画像のみを表示させる方法が存在します。コメントをキャンセルメールアドレスが公開されることはありません。(14)プロフィール29歳、岐阜県在。最近はコーヒーと仮想通貨にハマっています。(必須)題名メッセージ本文リンク一方通行投資で気楽に資産形成。っちの趣味ブログアフィリエイト。