サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
blog-and-destroy.com
【WordPress】コメント一覧のHTMLをカスタマイズする例WordPressには、ツリー状のHTMLデータ構造を処理するWalkerクラスがあり、コメント一覧のHTMLは、Walkerクラスを継承しているWalker_Commentクラス内で処理されています。 また、Walker_Commentクラスはwp-includes/class-walker-comment.phpファイルで定義されています。 例では、そのWalker_Commentクラスを継承したサブクラスで、コメント一覧のHTMLをカスタマイズします。 カスタマイズする箇所以下、例でカスタマイズする箇所となります。 コメント投稿者名のフォーマットを変更コメント投稿者のアバターを削除コメント日時のリンクを削除コメント時刻を削除コメントリプライボタンを削除コメント本文内でHTMLタグの利用不可一部のHTMLタグを変更一部のc
以下、そのぞれのinsertAdjacentText()の例とます。 要素内の先頭・後尾に追加する例以下の例では、idの値にexampleをもつ要素内の先頭と後尾に、テキストを追加しています。 <script> document.addEventListener('DOMContentLoaded', function(){ const element = document.getElementById('example'); // 要素内の先頭に追加する場合 element.insertAdjacentText('afterbegin', '要素内の先頭'); // 要素内の後尾に追加する場合 element.insertAdjacentText('beforeend', '要素内の後尾'); }); </script> <div> <div id="example"> <p>コンテンツ
今回は、Googleアナリティクス（GA4）を扱えるAPI（Google Analytics Data API）をPHPで利用して、データを取得する簡単な例となります。 例では、Google Cloudクライアントを利用してAPIリクエストを行うPHPスクリプトを、コマンドラインから実行して、Googleアナリティクスからページビュー数などを取得します。 Google Analytics Data APIを利用する準備APIを有効にするGoogle Analytics Data APIを利用するには、GCP（Google Cloud Platform）で有効にする必要があります。 APIを有効にする方法は、以下のリンク先を参考にしてみてください。 サービスアカウントを作成して認証情報をダンロードGCPで有効にしたAPIを呼び出すには認証情報が必要となります。 認証情報の種類にはいくつかあり
WordPressでサイトを制作していると、現在の投稿に設定しているカテゴリーやタグの名前をリンク付きで投稿内に表示したい場合があると思います。 今回は、そのような場合に使用できるソースコードの例となります。 投稿のカテゴリーを取得・表示｜get_the_category()テンプレートタグのget_the_category()は、現在の投稿に設定されているカテゴリーのオブジェクトを取得します。 また、引数に投稿IDを指定しループ外で利用すると、指定した投稿に設定されているカテゴリーのオブジェクトを取得します。 今回の例では、そのget_the_category()を使い投稿のカテゴリーを取得し表示します。 先頭のカテゴリーを表示する例現在の投稿に設定している先頭のカテゴリーのみを、リンク付きで表示する例となります。 また、カテゴリーの先頭は、get_the_category()で最初に取
WordPressのプラグイン『WordPress Popular Posts』は記事のランキング（人気記事一覧）を表示することができるプラグインです。 『WordPress Popular Posts』を使用していると、カテゴリー、タグ別の記事ランキングを表示したい場合があるかもしれません。 今回は、そのような場合に使える、条件によってカテゴリー、タグ別の記事ランキングを表示する例となります。 条件によってカテゴリー、タグ別の記事ランキングを表示する例今回の例では、カテゴリー、タグ別の記事ランキングを表示させる条件は、以下となります。 投稿ページでは、そのページが属しているカテゴリーの記事ランキングを表示カテゴリー、タグのアーカイブページでは、そのページが属しているカテゴリー、タグの記事ランキングを表示上記以外のページでは、サイト全体の記事ランキングを表示します。以下がソースコードの例と
今回は、Google スプレッドシートのAPI（Google Sheets API）で利用する、スプレッドシートID・シートIDを確認する方法となります スプレッドシートID・シートIDを確認する方法「スプレッドシートID」はスプレッドシートのファイルを識別するID、「シートID」はファイル内の個別のシートを識別するIDとなり、それぞれスプレッドシートのURLから確認できます。 スプレッドシートのURLは次のような形式となり、「スプレッドシートID」「シートID」の箇所がそれぞれのIDとなります。 https://docs.google.com/spreadsheets/d/スプレッドシートID/edit#gid=シートID また、スプレッドシートIDは、文字・数字・およびいくつかの特殊文字を含む文字列となり、シートIDは数字の値となります。 参考サイトなどIntroduction to
Visual Studio Code（以下、VSCodeと表記）のプラグイン「PHP Intelephense」は、PHPコードの入力補完や構文チェックなどを行うプラグイン。 その「PHP Intelephense」は、インストールしたバージョンによってWordPress関数を認識せず、Undefined functionとして未定義関数のエラーとなる場合がありますが、今回は、そのエラーを解消する設定方法となります。 【VSCode】PHP IntelephenseでWordPress関数を認識させる設定方法VSCodeの画面左下にある歯車アイコンをクリックします。 表示されるメニューから「設定」を選択します。設定内の上部にある検索ボックスで、「intelephense.stubs」を検索します。設定「intelephense.stubs」が表示されるので、設定の下部にある「項目の追加」を
今回は、PHPでX API（旧Twitter API）を利用し、ボットのようにランダムで自動投稿する簡単な例となります。 【X API × PHP】自動投稿をする例例では、PHPのTwitterOAuthライブラリでX APIを利用し、指定した文字列の中からランダムで投稿するスクリプトを作成します。そして、そのPHPスクリプトをレンタルサーバーのcronから実行し、自動で投稿させます。 X APIの認証情報を確認まずは、Twitter DevelopersにAPIを利用するTwitterアカウントでログインし、APIリクエストで必要となる以下の認証情報を確認します。 また、Twitterへ投稿する場合には、User authentication settingsの編集画面で、App permissionsの設定を「Read and write」にします。 Consumer Key Cons
npm（Node Packaged Modules）は、Node.jsで利用するパッケージ（モジュール）の管理などができるツールとなり、Node.jsと一緒にインストールされます。 そのnpmでは、パッケージをグローバルにインストールして利用する方法と、プロジェクト毎のローカルにインストールして利用する方法がありますが、今回は、主にnpmをローカルで利用する際に、よく使うコマンドのまとめとなります。 また、Node.jsをMacでインストールする方法については、以下のリンク先を参考にしてみてください。 npm自体に関するコマンド以下、npm自体に関するコマンドとなります。 バージョンを確認npm -v最新バージョンにするnpm update npmヘルプを確認npm helpnpmの問題をチェックnpm doctorプロジェクトでnpmを利用する準備プロジェクトでnpmを利用するには、まず
WordPressでは、インストールした1つのWordPress上で、複数のサイトやブログを運営できるマルチサイト機能があります。 今回は、そのマルチサイトで現在のサイトを判断する条件分岐の例となります。 【WordPress】マルチサイトで現在のサイトを判断する条件分岐の例マルチサイトでサイトを追加すると、サイトを識別する際に利用できる「ブログID」が付与されますが、例ではそのブログIDを利用し、現在のサイトを判断します。 また、マルチサイトのブログIDを確認する方法については、以下のリンク先を参考にしてみてください。 以下、ソースコードの例となり、マルチサイトでブログIDを利用し、現在のサイトを判断する条件分岐となります。 <?php // 現在のサイトのブログIDを取得 $blog_id = get_current_blog_id(); if( $blog_id == 1 ){ //
【WordPress】管理画面のみにCSS・JavaScriptのファイルを追加する方法｜admin_enqueue_scripts 管理画面のみにCSS・JavaScriptファイルを読み込むタグを追加する方法管理画面のみでCSSやJavaScriptの外部ファイルを読み込むタグを追加するには、アクションフックadmin_enqueue_scriptsを利用します。 以下、管理画面に指定した外部ファイルを追加する例となり、functions.phpに記述します。 function mytheme_admin_enqueue() { // cssファイルを追加 wp_enqueue_style( 'my_admin_css', get_template_directory_uri() . '/css/my-admin-style.css' ); } add_action( 'admin_e
WordPressでサイトを作成していると、指定したカテゴリー内の投稿で利用しているタグ一覧を表示したい場合があるかもしれません。 今回は、そのような場合に利用できるソースコードの例となります。 指定したカテゴリー内で利用しているタグ一覧を取得して表示する例例では、まず、指定したカテゴリーに属する投稿で利用しているタグのオブジェクトを取得する関数を作成します。そして、作成した関数を利用しタグ一覧を表示します。 以下が作成する関数の例となり、functions.phpに記述します。 function my_tags_in_cat( $cat_id ){ // 現在のカテゴリーに属する投稿のIDを配列で取得 $post_ids = get_objects_in_term( $cat_id, 'category' ); // 現在のカテゴリーに属する投稿で利用しているタグのオブジェクトを取得 $
WordPressでサイトを作成していると、bodyタグのclassの値をページ毎で異なる値にしたい場合があるかもしれません。 今回は、そのような場合に使用できるソースコードの例となります。 bodyタグのclassの値を条件分岐タグを使い変更する例以下が例となり、条件分岐タグを使用し表示されるページによりbodyタグのclassの値を変更しています。 ソースコードを記述する箇所は、テンプレートファイル内のbodyタグの箇所となります。 <?php if (is_front_page() && is_home()){ $body_class = 'home' ; } elseif (is_single()){ $body_class = 'single single-' . get_the_ID() ; } elseif (is_page()){ $body_class = 'page p
今回は、jQueryを利用して、スクロールの位置により、指定したコンテンツの固定・解除を切り替えるコードの例となります。 【jQuery】スクロールの位置によりサイドバーを固定・解除する例以下の例では、指定したスクロールの位置になると、サイドバー内の「Side-A」の要素を固定します。そしてフッターの手前でその固定した要素を解除します。 See the Pen side-fixed-content by yic666kr (@yic666kr) on CodePen. jQueryのコードについて例では、スクロールの位置によって、サイドバーにある「Side-A」の要素に指定されているclassの値を変更し、その要素を固定または解除しています。また、要素を固定する際のCSSにはposition: fixed;を使用しています。 以下、jQueryのコードの簡単な説明となります。 offset
WordPressでウェブサイトやブログを作成していると、ページ内に目次を作成したい場合があるかもしれませんが、毎回、自分自身で目次を作成するのは面倒だと思います。 今回は、そのような場合に使用できるソースコードの例となり、プラグインを使わずPHPでページ内の目次を自動で作成し出力します。 また、PHPではなく、jQueryを使い目次を出力することも可能です。詳しくは以下のリンク先を参考にしてみてください。 WordPressで投稿ページの目次を自動出力する例目次が作成される条件今回の例では、投稿ページの本文内に、属性を持たないh2・h3要素が3つ以上ある場合、それらの要素から自動で目次を作成して出力します。 また、目次の先頭の項目がh2要素となる場合のみに使用できます。 作成する目次の特徴目次として出力されるHTMLはol要素で出力され、目次の項目にはページ内のそれぞれの箇所へのアンカー
Ajax通信をウェブサイトに実装している場合、Ajax通信がローディング中は、画面上にくるくる（スピナー）などの表示があると、サイト閲覧者にとってローディング中ということが理解でき、良いデザインだと思います。 今回は、そのような場合に使用できるソースコードの例となり、jQueryを利用しAjaxのローディング中にスピナーを表示させます。 Ajaxのローディング中にくるくる（スピナー）を表示する例以下がjQueryを利用したソースコードの例となります。 例では、「Click 」ボタンを押すと、Ajax通信を行います。そして、ローディング中には、スピナーがある全画面を覆うオーバーレイを表示し、Ajax通信が終了するとオーバーレイを非表示にします。 See the Pen jQuery Ajax Loading Spinner by yic666kr (@yic666kr) on CodePen
今回は、JavaScriptでブラウザのウィンドウやタブがアクティブになった際と、アクティブでなくなった際に、それぞれ指定した関数を実行する方法となります。 ウィンドウ・タブのアクティブ・非アクティブを判断して関数を実行する方法以下、ソースコードの例となります。 // ウィンドウがアクティブになった際に実行する関数 function play() { // 実行させる処理を記述 } // ウィンドウがアクティブでなくなった際に実行する関数 function pause() { // 実行させる処理を記述 } // ウィンドウをフォーカスしたら指定した関数を実行 window.addEventListener('focus', play, false); // ウィンドウからフォーカスが外れたら指定した関数を実行 window.addEventListener('blur', pause,
WordPressでブログを運営していると、投稿ページのmeta description（メタディスクリプション）タグの内容を、毎回、設定するのが面倒くさいと思うことがあるかもしれません。 今回は、そのような場合に使えるソースコードの例となり、ページの本文の一部を使いmeta descriptionタグを自動で作成します。 meta descriptionタグを自動で作成する例以下がソースコードの例となり、functions.phpに記述します。例では、投稿ページのmeta description（メタディスクリプション）タグを自動で作成します。 meta descriptionタグの内容の文字列は、本文の先頭から全角130文字（半角260文字）となります。 function my_description(){ // 現在の投稿オブジェクトを取得 $post_data = get_post
今回は、Laravel MixでSass・JavaScriptなどをコンパイルした際に、ソースマップを出力する設定方法となります。 また、今回の例ではLaravel Mix をすでにインストールしている前提としています。Laravel Mix のインストール方法などについては、以下のリンク先を参考にしてみてください。 【Laravel Mix】Sass・JavaScriptのソースマップを出力する設定方法Laravel Mixでは、設定をwebpack.mix.jsファイルで管理します。 以下、webpack.mix.jsに、ソースマップを出力する.sourceMaps()メソッドを追加した設定例となります。 const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resou
WordPressで、テンプレートタグthe_contentを使用し投稿などの本文を扱う際に、本文にカスタムフィールドの値を含めた状態で扱いたい場合があるかもしれません。 今回は、そのような際に利用できるソースコードの例となります。 投稿の本文内にカスタムフィールドの値を含める例以下は、フィルターフックthe_contentを使い、本文にカスタムフィールドの値を含めるソースコードの例となり、functions.phpに記述します。 function my_add_field( $content ){ if( is_single() ){ // カスタムフィールドの値を取得 $value = get_post_meta( get_the_ID(), 'sample_field', true ); if( $value ){ // 本文の後にカスタムフィールドの値を追加 $content .=
CSSのメタ言語のSassでは、Map（連想配列）のデータを扱うことができます。 Mapでプロパティなどのデータを扱うことでコードを管理しやすくなり、繰り返しデザインする箇所で効率的にデータを利用できます。 今回は、そのMapを使用したコーディングの例となり、Map（連想配列）の要素の値がリスト（配列）となるデータを、eachループ内でnth関数を使い扱い、SNSボタンをコーディングする例となります。 連想配列の値が配列のデータを扱う例｜eachループ内でnth関数を利用例では、Twitter・Facebook・Instagram・YouTubeのSNSボタンのコーディングしています。なお、SNSボタンのリンクは貼っていません。 ※SNSのアイコンは、アイコンフォントが使える『Font Awesome』のCDNを参照して使用しています。 See the Pen rdrBpb by yic6
HTML・CSSのコードHTML・CSSのコードは以下となります。また、CSSではリセットCSSを利用しています。 See the Pen Nature Remo Browser by yic666kr (@yic666kr) on CodePen. 上記コードではリモコン送信が成功した際に、ページ左上にある固定された箇所をCSSで点滅させています。 CSSで要素を点滅させる方法については以下のリンク先を参考にしてみてください。 エアコンのリモコンボタンエアコンのリモコンボタン・プルダウンメニューの場合、button要素とoption要素のvalueの値には、エアコンのリモコンボタン情報となる、JSON内のキーairconにあるデータをそれぞれ指定します。 テレビのリモコンボタンテレビのリモコンボタンの場合、valueの値には、テレビのリモコンボタン情報となる、JSON内のキーbutton
一部のMacBook Airには、SDカードを挿入するスロットがあり、SDカードを読み込むことができます。 そのスロットでmicroSDカードを読み込む場合には、SDカードに変換するアダプターを使用しますが、一般的な変換アダプターでは、MacBook Airからかなりはみ出し不格好になってしまいます。 今回は、そのようにはみ出すことのない、MacBook AirにぴったりフィットするmicroSDカードからSDカードに変換するアダプターの紹介となります。
今回はJavaScript・CSSを利用し、タブメニューを切り替えてコンテンツの内容を変更する例となります。 【JavaScript・CSS】タブの切り替えメニューを実装する例以下の例では、「Tab-A」「Tab-B」「Tab-C」のいずれかを選択して変更すると、その下のコンテンツの内容も変更します。 See the Pen JavaScript：Tab Switching by yic666kr (@yic666kr) on CodePen. HTMLの簡単な説明HTMLのマークアップの簡単な説明となります。 以下の箇所では、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成しています。 デフォルトでは、現在のタブがclassにis-activeをもつ「Tab-A」となり、コンテンツの要素は「Content-A」を表示しています。 「Content-A」の要素は、clas
設定の適用範囲についてVSCodeでは設定変更を適用する範囲を、以下の範囲で変更できます。 ユーザー（VSCode全体）ワークスペース（ワークスペースごと）フォルダ（ワークスペース直下のフォルダごと）今回のsettings.jsonファイルは、「ユーザー」の設定変更を管理するJSONファイルとなります。 それぞれのJSONファイルを表示する場合には、設定変更を適用する範囲を変更した後に、上記手順でJSONファイルを開きます。 設定を適用する範囲を変更設定変更を適用する範囲は、設定内の検索ボックスの下にあるタブで変更できます。 設定内にある設定変更を適用する範囲を変更するタブ。コマンドパレットから「settings.json」と「デフォルト設定を確認できるファイル」を開く方法以下の手順は、コマンドパレットから「settings.json」ファイルと、VSCodeのデフォルト設定を確認できる「
今回は、Sassをコンパイルできるnpmのパッケージ「node-sass」を利用し、指定したSassファイルが更新されたら自動でコンパイルする例となります。 また、npmはすでにインストールされている前提としています。npmのインストールやコマンドについては以下のリンク先を参考にしてみてください。 【npm】node-sassを利用しSassを自動コンパイルする例プロジェクト内にnode-sassをインストールnode-sassをプロジェクト内にインストールする方法となります。 package.jsonを作成※すでにプロジェクト内でnpmを利用しpackage.jsonがある場合には、この手順は飛ばします。 まず、プロジェクト内でnpmを配置するディレクトリ（npmのルート）にcdコマンドで移動します。 そして、以下のコマンドでpackage.jsonを作成します。 npm init -y
AndroidアプリのTasker（タスカー）は、指定した条件により、スマホの設定変更などの命令（アクション）を実行できる便利なアプリ。 今回は、そのTaskerで個人的によく使うアクションの設定例と、アクションの追加方法のまとめとなります。 また、記事内にはTaskerが日本語化されていない以前のバージョンの記載が含まれています。 タスクとアクションについてTaskerでは、スマホの設定変更などの命令を「アクション」、命令を順番にまとめたものを「タスク」といいます。 タスク・アクションを追加する方法以下、新規タスクを作成しアクションを追加する手順となります。 「タスク」タブを選択します。 「タスク」タブ内の右下にある「＋」ボタンをタップします。 タスク名を入力するダイアログが表示されるので、任意のタスク名を入力し「チェック」アイコンをタップし新規タスクを作成します。タスク名を入力するダイ
WordPressでサイトを作成していると、アーカイブページのタイトルを一定のルールで変更して出力したい場合があると思います。 今回はそのような場合に使える例となり、アーカイブページのタイトルを変更して出力します。 アーカイブページのタイトルを変更して出力する例アーカイブページのタイトルを変更例では、カテゴリーとタグそれぞれのアーカイブページのページタイトルを、次のように変更しました。 カテゴリー名または、タグ名の後に「の記事一覧」のテキストを追加。 例えば、カテゴリー名が「音楽」の場合、そのカテゴリーアーカイブのページタイトルは「音楽の記事一覧」となります。 ソースコードは以下となり、functions.phpファイルに記述します。 function my_archive_title($title) { if ( is_category() ) { $title = single_cat
今回は、WordPressのサイト内で使用している、すべてのカテゴリー名の一覧、タグ名の一覧をリンク付きで表示する例とります。 サイト内すべての「カテゴリー一覧」「タグ一覧」を取得・表示する例カテゴリー一覧をリンク付きで表示｜get_categories() 以下、カテゴリー一覧をリンク付きで出力する例となり、表示させたい場所に記述します。 <ul class="category-list"> <?php // パラメータを指定 $args = array( // カテゴリー内の記事数順で指定 'orderby' => 'count', // 降順で指定 'order' => 'DSC' ); $categories = get_categories( $args ); foreach( $categories as $category ){ echo '<li><a href="' .
次のページ
このページを最初にブックマークしてみませんか？
『BLOG AND DESTROY』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
