サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
naoyu.net
配布されているテーマに基本機能として実装されているとは思いますが、あえてこの記事は具体的な実装方法を紹介します。 テーマのカスタマイズなどに参考になれば幸いです。 ページネーション用に関数を定義する function.phpに以下のコードを追記します。コピペでOKです! function the_pagination() { global $wp_query; $bignum = 999999999; if ( $wp_query->max_num_pages <= 1 ) return; echo '<nav class="pagination">'; echo paginate_links( array( 'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ), 'format' =>
マイナンバーカードとe-Taxの利用者識別番号の関連付けにはマイナポータルの登録は必須!これもっと周知してよ、国税庁さんよ! マイナポータルへの登録が必要だった! 結論から言うと、「マイナポータル」というWEBサービスへの登録が必要でした。 解決の糸口になったのは、ヤフー知恵袋でした。 このページが見つからなかったら、完全に迷宮入りしてました。 質問者さんマジでグッジョブです。 ヤフー知恵袋のページ マイナポータルにログインすると、マイナンバーカードの利用に必要な設定がなされます。 またマイナポータルからeTaxにつなげるようにすれば、eTaxへのログインが簡単になります。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14201848489 そんなのシラネーヨ! 何だよ「マイナポータル」って? 初めて聞いたわ!そんなサ
the_archive_titleでページタイトルを表示する the_archive_title関数は、category、tag、taxonomyなど、アーカイブページのタイトルをこの関数1つで表示させることが出来ます。超便利! クエリの内容に基づいてアーカイブのタイトルを表示します。ターム(カテゴリー、タグ、カスタムタクソノミー)、日付、投稿タイプ、投稿フォーマット、作成者などのアーカイブページが対象です。 関数リファレンス/the archive title デフォルトで余計な文字列が入る the_archive_title関数の使用例。 category.phpやarchive.phpなどに記述します。 <h1><?php the_archive_title(); ?></h1> 出力される文字列がこちら。 「カテゴリー: ほにゃらら」とか「タグ: ふにゃらら」という風に名前の前に余
記事情報だけが欲しいのに、サイドバーやヘッダー・フッターなどのデータも毎回読み込むから表示も遅い。 そこで本稿で紹介したいのは「Infinite Scroll」です。 これを実装すれば、ページ遷移せずに過去の記事を読み込むことが出来るので、過去の記事をサクサクっと呼び出せるようになります。 コードも短く、JavaScriptが苦手な人でもカンタンに実装できるので初心者にもオススメです。 デモページはこちら Infinite Scrollのデモページ アーカイブページのHTML要素を確認 archive.php、category.php、taxonomy.phpなど、記事の一覧を表示するテンプレートファイルを編集します。 必要に応じて、実装したいページに同じ変更を加えてください。 念の為、ファイルをコピーして「category_backup.php」など名前を変えてバックアップしてくださいね
AOSは、jQuery不要のスクロールアクション系JavaScriptプラグインです。 マウスのスクロールでHTML要素がウィンドウ内に入ると、フェード・インして現れるエフェクトを実現できます。 jQuery不要で、しかも動作が軽いのでとても使いやすいです。 ページの読み込み速度を気にせずアニメーションを実装したい場合には、ぜひとも採用したいJSプラグインになりますね。 本稿では、そんなAOSの使い方を解りやすく説明していきたいと思います! まずは各種セッティングを施したデモページを作成しました。 設定の説明も入れてAOSを実装していますので、ご参考までにどうぞ! AOSのデモ また、下記URLはAOSを使ったアニメーションの実装事例です。 先日ツイッターで流れてきて衝撃を受けたやつw http://www.crazycrypto.info/entry/crypto-currency-gi
はてなブログからWordpressへの引っ越しにおいて「リダイレクト」は必要な作業。 リダイレクトとは、簡単にいうと、WEBサイトの引っ越しを検索エンジンに知らせる作業。 もちろんGoogleBotだけでなく、読者にとってもリダイレクトは適切な方法です。 しかし、はてなブログでは通常の方法によるリダイレクトが使えません。 本記事では、JavaScript(以下JS)を使った「はてなブログからWordpressへリダイレクトする方法」を紹介します。 尚、この記事はこんな人におすすめです! 独自ドメインではない 記事に「カスタムURL」は使わず、デフォルトで投稿している 例)https://hogehoge.hatenablog.com/entry/2018/06/01/105926 というURLになっている 「カスタムURL」は一部で使っているが、ほぼデフォルトURLのまま すべての記事ペー
副業のひとつの形としてブームになりつつある「ブログ」。 ブログと言ってもその使い方はさまざまで、日記を書いたり、自作イラストを載せたり、詩を書いたり…、これまでは趣味のひとつと捉えられていました。 ところが昨今、テキストやバナー広告をブログに掲載し、その広告収入を得ることを目的としたブログが急増しています。 広告収入のみで生計を立て、やがて「独立」や「法人設立」までしてしまう、いわゆる「ブロガー」と呼ばれる職業のひとつの形として少しずつ確立されようとしています。 ブロガーの他に「アフィリエイター」という肩書もあります。 アフィリエイターとは、アフィリエイト広告を得意とするサイト運営者のことをそう呼びます。 A8.netやバリューコマースといった広告プログラム会社と契約し、ある企業が紹介してほしいサービスや商品を紹介して報酬を稼ぐことが出来ます。 自分の運営するWEBサイト経由で商品が売れれ
たとえばこんなボタンとか。 ぷるっと動くボタン Animate.cssを使えばカンタンです! classを2~3コ指定するだけでアニメーションが実装できる「Animate.css」の使い方を紹介します。 後半では、jQueryなどを使ってクリックやスクロールで動くアニメーション実装方法も説明していきますので、よかったら最後までお付き合いください。 そもそもCSSのAnimationとは? CSS3 アニメーション は、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。アニメーションは、2 種類の要素で構成されています。それは、アニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。同様に、アニメーション途中の通過点となるスタイルを示すこともできます。 引用元:CSS アニメーション – MDN CSSでは、アニメ
スクロールに連動して任意のセクションが表示されると背景画像が切り替わる効果をjQueryとCSSで実装しました。 公開・配布されているjQueryプラグインなどは未使用です。 そのセクションに合った背景画像をフェードイン・アウトで表示させたかったので備忘録としてデモを制作しアップしています。 demoページを見る フェードイン効果はCSSを使う CSS3のプロパティtransitionを使い、フェードイン・アウトを表現します。 背景自体はposition: fixedで配置し、デフォルトではopacity: 0で透明にしておきます。 コンテンツが表示されるタイミングでclass=showを追加し、opacity: 1に変更。 背景にする画像はbackground-imageであらかじめ読み込んでおきます。 /* init */ .background { top: 0; left: 0;
WP-PageNavi とは WordPressユーザーにはお馴染み、WP-PageNaviはページネーションを簡単に追加できるプラグインです。 WP-PageNavi(wordpress.orgのページを見る) ページネーションを入れたい箇所に、以下のコードを入れるだけで実装完了。超簡単です。 <?php wp_pagenavi(); ?> WP-PageNaviが表示されない問題 時々、WP-PageNaviのページネーションが表示されない問題が起きます。 これの原因のひとつに、「WP_Queryでクエリを変更していた」という事がよくあります。 例えば、固定ページでカスタム投稿のブログ記事を一覧表示したいとします。 その場合、new WP_Query()で、固定ページからカスタム投稿のクエリに変更します。 次のコードは一般的なWP_Queryでクエリを変更した処理です。 <?php $
WordPressでPjaxを実装した後、色々な壁にぶち当たったので、その時の解決方法を紹介していきます。 WordPressでPjaxを実装する 「jquery-pjax」というjQueryプラグインを使います。 GitHub defunkt / jquery-pjax <?php get_header(); ?> <nav id="gnav"> <ul> <li><a href="">nav1</a></li> <li><a href="">nav2</a></li> <li><a href="">nav3</a></li> <li><a href="">nav4</a></li> <li><a href="">nav5</a></li> </ul> </nav> <div id="main_content"> <!-- コンテンツが入れ替わる部分 --> </div> <?php g
この記事では、タームごとに分類してカスタム投稿の記事一覧の作り方を紹介します。 まずタームごとsectionタグで分類し、記事一覧を表示させます。 タームごとに分類して記事一覧を表示するPHPコード とりあえずはコピペでも動作するはずなので、テーマの好きなところへ貼り付けてみましょう。 必ずバックアップはしてくださいね! <?php $taxonomy_name = 'tax_category'; // タクソノミーのスラッグ名を入れる $post_type = 'custom_post'; // カスタム投稿のスラッグ名を入れる $args = array( 'orderby' => 'name', 'hierarchical' => false ); $taxonomys = get_terms( $taxonomy_name, $args); if(!is_wp_error($tax
CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。 そこで役立つ便利なプラグインjQuery masonryをまとめてみました。 ちなみにMasonryとは、和訳すると「石造建築」。 レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな? jQuery masonryの使い方 JSファイルをダウンロード まずはjQuery本体とjQuery masonry本体をDL。 jQuery jQuery masonry jsファイルを読み込み headタグ内に、ダウンロードしたJSファイルの読み込みます。 <script src="jquery.js"></script> <script src="jquery.masonry.min.js"></script> 続けて、/bodyの直前に下記jsを記述します。 <script>
display:inline-blockで発生する謎のスペース imgタグを横並びにしようとすると謎のスペースが出来ます。 display:inline-blockでも同じような空白ができますね。 この隙間は、コードの上での改行が空白として認識してしまっているからなんですね。 HTMLはこんなソースになってませんか? <img src="hoge1.jpg" alt="" /> <img src="hoge2.jpg" alt="" /> <img src="hoge3.jpg" alt="" /> <div class="box">aaaaaaa</div> <div class="box">aaaaaaa</div> <div class="box">aaaaaaa</div> ふつう、こうやってタグ毎に改行して見やすく記述しますよね。 それでは、.boxにはinline-blockを
CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。 そこで役立つ便利なプラグインjQuery masonryをまとめてみました。 ちなみにMasonryとは、和訳すると「石造建築」。 レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな?
このページを最初にブックマークしてみませんか?
『ナオユネット - WordpressとWEBデザインの参考書』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く