サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
techmemo.biz
WordPressでカスタム投稿タイプのパーマリンクを数字ベースに変更する方法をご紹介いたします。 カスタム投稿タイプのデフォルトのパーマリンク設定は”投稿名”になっています。パーマリンク設定を投稿名以外にしたい場合、プラグインを使っても良いですが、functions.phpに少し追記するだけで簡単に変更可能です。 カスタム投稿タイプの追加 まずは、カスタム投稿タイプを追加します。今回は「book」というカスタム投稿タイプを追加しました。 ※カスタム投稿タイプの追加方法については、「プラグインを使わずにカスタム投稿やカスタムタクソノミーを追加する方法」をご参照ください。 function add_custom_post_type() { $args = array( 'label' => 'ブック', 'hierarchical' => false, 'public' => true, '
最近、VSCode(Visual Studio Code)の配色テーマを変更したのですが、コメントアウトした箇所の文字色が薄くてちょっと見辛いなーと思っていました。全然読めるし、コメントなので目立たせなくても良いんですけどね。 ですが、もうちょい目立つ色に変えたいなということで配色を変更したので、設定方法を備忘録として残しておきたいと思います。 VSCodeでコメントの文字色を変更する方法 まずは、[Ctrl] + , で設定画面を開いて、右上にある[設定(JSON)を開く]ボタンをクリックします。 settings.jsonが開くので、以下を追記します。カラーコードの部分は、好みの色に変更してください。 配色変更前はこんな感じ↓ 上記設定を追加した後はこんな感じです↓ まぁこのままだと目立ちすぎなのでカラーコードの調整は必要ですが、簡単にコメントの文字色を変更できましたね。 あとがき V
WordPressでは、コアブロック(WordPress標準で用意されているブロック)のスタイルが書かれた/wp-includes/css/dist/block-library/style.min.cssが読み込まれます。style.min.cssの中には、すべてのコアブロックのスタイルが記述されており、サイズは78KBくらいあります(WordPress5.8時点)。 <link rel='stylesheet' id='wp-block-library-css' href='https://example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.8' media='all'> 1ページ内で全コアブロックを使用することはまずないというか、一部のブロックしか使わないことがほとんどかと思います。なので、無駄なスタイル
PHP IntelephenseはVSCodeの拡張機能で、PHPのコード補完や構文チェック、自動整形などをしてくれます。 デフォルトの設定だと自動整形でif文などの波括弧が改行(字下げ)されますが、個人的には改行しない書き方を普段しているので、勝手に改行されたくないわけです。 例えばif文だと、以下のようになります。
MW WP Formでフォームを自動入力させる方法を、2パターンご紹介したいと思います。 MW WP Formでは、GETパラメータを使ってフォームを自動入力することができます。この方法を使えば、お問い合わせフォームへの遷移元ページの情報を自動入力することができ、手入力による手間やミスを省くことができます。 MW WP FormでGETパラメータを使ってフォームを自動入力する方法 投稿IDから投稿情報を自動入力する方法 まずは、投稿IDから投稿情報を取得して、フォームに自動入力する方法です。 MW WP Formのフォーム作成画面で、「URL引数を有効にする」にチェックを入れます。 フォーム側では、valueに自動入力したい情報を指定します。以下の場合、パラメータで指定した投稿IDのタイトルが自動入力されます。 valueの値には、$postに入っている情報であれば取得可能なので下記が指定
MW WP Formで作成されたフォーム内で、ラジオボタンやチェックボックスの選択によって、必須項目を切り替える方法をご紹介いたします。 例えば、「その他」というラジオボタンが選択された場合のみ、特定のテキストフィールドを必須項目に変更するといったことが可能です。 MW WP Formで選択肢によって必須項目を切り替える方法 ラジオボタンやチェックボックスの選択項目によって必須を切り替えるには、mwform_validation_mw-wp-formというフックを使って制御します。 やり方については、NxWorldさんのこちらの記事で紹介されている通りなのですが、この方法に加えて必須を切り替える対象がチェックボックスやラジオボタンだった場合の対応方法もご紹介します。 ラジオボタンの選択項目によって必須を切り替える場合 ラジオボタンの選択項目によって必須を切り替えるには、適用しているテーマの
Custom Sidebarsは、ページ毎に表示するウィジェットを切り替えられるようになるWordPressプラグインです。 特定の投稿や固定ページで、サイドバー等のウィジェットエリアに表示する内容を変えたい時に便利です。 Custom Sidebarsのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Custom Sidebarsをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Custom Sidebarsを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。「Custom Sidebars」で検索します。[今すぐインストール]をクリックして、Custom Sidebarsをインスト
WordPressで読み込んでいるCSSファイルのバージョン番号に、テーマのバージョンを使う方法をご紹介いたします。 通常は、wp_enqueue_styleで読み込むCSSには固定のバージョン番号を引数で指定しますが、テーマのバージョンをバージョン番号として使うことで、テーマの更新時にキャッシュもクリアされて結構便利だと思います。 WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法 wp_get_theme関数について CSSファイルのバージョン番号にテーマのバージョンを付与するには、wp_get_theme関数を利用します。 wp_get_themeはテーマの情報を取得できる関数で、テーマのstyle.css内で定義されている以下の情報を取得できます。 NameThemeURIDescriptionAuthorAuthorURIVersion
テーブル内のthやtdに対して、CSSで横幅を指定してもうまく効かない場合の対処法をご紹介いたします。 複雑なテーブルを実装する時なんかは役立つと思います。 よくある解決法 「table-layout:fixed;」 よく紹介されている対処法は、該当のテーブルに対して「table-layout:fixed;」を指定してあげる方法です。 例えば、thだけを横幅100pxにしたい場合は、以下のように指定します。
<body class="home blog logged-in admin-bar wp-embed-responsive enable-search-modal has-no-pagination showing-comments show-avatars footer-top-visible customize-support"> ※Twenty Twentyのトップページ(投稿一覧)のソースです。ソースを確認すると、投稿一覧なので”home”というクラスが追加されていたり、ログイン中なので”logged-in”というクラスが付いていることがわかります。 このように、body_class()を入れるだけで、ページによって異なるクラスを追加してくれるようになります。 ただ、自動で追加されるクラスだけでなく、独自のクラスを追加したいというケースがあるかもしれません。また、逆に既存のクラス
CSSのみで六角形を実装する方法 上記のような六角形を実装します。 まず、HTMLは以下のように記述します。今回はdivにしていますが、リンク等でもOKです。 .hexagon { width: 88px; height: 50px; background: #aaa; position: relative; } .hexagon_cont { height: 100%; font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .hexagon::before, .hexagon::after { content: ""; width: 100%; height
Specificity Calculatorは、CSSセレクタの詳細度を確認できるWebサービスです。 CSSでは、セレクタの詳細度が高い方を優先して適用する仕組みになっています。例えば、「.content」よりも「p.content」の方が詳細度は高いので、.contentの方が後で書かれていたとしても、p.contentのスタイルが優先して適用されます。以下の場合、フォントサイズは20pxになります。 CSSで新たにセレクタを追加して上書きした時に、別セレクタのスタイルが適用されたままの場合は、この詳細度が関係している可能性が高いです。 Specificity Calculatorは、そんなCSSセレクタの詳細度を計算してくれるWebサービスです。 Specificity Calculatorの使い方 Specificity Calculatorにアクセスすると、セレクタの入力欄が表示
下にスクロールしたら消え、上にスクロールすると再表示される固定ヘッダーを実装する方法をご紹介いたします。 以前、素のJavaScriptで実装する方法はご紹介しましたが、今回はjQuery版です。 下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法 固定ヘッダーのCSSはこんな感じです。transitionを追加しておくことで、ヌルっと表示/非表示されます。 header { width: 100%; padding: 10px 0; position: fixed; top: 0; left: 0; z-index: 3; transition: all .3s ease; } <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $
カスタム投稿とカスタムタクソノミーを追加した場合、デフォルトの状態ではURLは別階層に分かれた状態で表示されます。 例えば、「news」というカスタム投稿を追加し、「news_cat」というカスタムタクソノミーを追加した場合、カスタム投稿とカスタムタクソノミー一覧のURLはそれぞれ以下のようになります。 カスタム投稿 → /news/投稿名/カスタムタクソノミー → /news_cat/ターム名/ できれば、カスタムタクソノミーを「/news/news_cat/ターム名/」というURLに変更したいというケースがあるかもしれません。(実際に、カスタム投稿とカスタムタクソノミーでURLのディレクトリが異なるのは気になるから調整してほしいと言われたことがあります) そこで今回は、カスタム投稿とカスタムタクソノミーを追加した時に、URLのディレクトリ構造を揃える方法をご紹介いたします。 カスタムタ
WordPressで投稿一覧などにサムネイルを表示する際は、アイキャッチ画像を利用することが多いです。しかし、アイキャッチ画像ではなく、投稿内の1枚目の画像をサムネイルとして使いたいというケースもあると思います。 Auto Post ThumbnailやXO Featured Image Toolsを使えば、投稿内の画像をアイキャッチ画像に自動登録してくれます。これらのプラグインを使えば、投稿一覧でアイキャッチ画像をサムネイルとして表示している場合でも対応可能です。 ですが、テーマ側で対処することも可能なので、その方法をご紹介したいと思います。プラグインを使いたくないとか、もっと柔軟にカスタマイズしたいという場合は、ぜひ参考にしていただければと思います。 WordPressで投稿の最初の画像を取得/出力する方法 まずは、適用しているテーマのfunctions.phpに以下を追加します。 f
また、以下のように「?author=1」を付けてアクセスすると、ユーザーIDが1のユーザーの著者別アーカイブページにリダイレクトされます。リダイレクト先のURLには管理者のユーザー名が含まれるので、WordPressのログインIDがわかってしまうわけですね。 ログインIDがバレるのを防ぐための対策として、著者別アーカイブページ自体を無効化してしまうという方法があります。 以前、著者別アーカイブページを無効化する「Remove Author Pages」というプラグインを紹介しましたが、今回はfunctions.phpにコードを追加することで、著者別アーカイブページを無効化する方法をご紹介したいと思います。 WordPressでプラグインを使わずに著者別アーカイブページを無効化する方法 適用しているテーマのfunctions.phpに以下を追加します。コピペでOKです。 function d
WordPressサイトを子テーマで作成していると、親テーマで定義されている関数を子テーマ側で上書きしたいケースが出てきます。上書きというよりも、置き換えや再定義ですね。 functions.phpは子テーマ→親テーマの順で両方読み込まれるため、子テーマで定義した関数を優先させるにはひと手間必要です。 そんなわけで、親テーマのfunctions.phpで定義された関数を子テーマのfunctions.phpで上書きする方法をご紹介したいと思います。 親テーマで定義されている関数を子テーマのfunctions.phpで上書きする方法 親テーマ側に!function_existsがある場合 親テーマ側のfunctions.phpで関数を定義する時に、!function_existsが記述されている場合は、同じ関数名で子テーマ側に定義してあげれば良いので楽です。 親テーマ側で上記のように書かれてい
フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」ですが、表示されるカレンダーは祝日に対応していません。 日曜日と祝日の色を変えたいという要望があり、カレンダーに日本の祝日を反映させて対応したので、備忘録として残しておきたいと思います。 jQuery UI Datepickerのカレンダーに祝日を反映させる方法 祝日の情報は、Holidays JP APIを使って取得します。Holidays JP APIは祝日のデータを返してくれるAPIで、祝日のデータはGoogleカレンダーの情報から自動で生成されます。 Holidays JP APIで取得した祝日の情報をjQuery UI Datepickerのカレンダーに反映させます。 具体的には、以下のようにスクリプトを記述します。 ※jQuery UI Datepickerの導入手順については、こち
jquery.simpleTicker.jsは、回転したり横からスライドインしてくるニュースティッカーを実装できるjQueryプラグインです。 挙動については、以下デモページよりご確認いただけます。 デモページを見る jquery.simpleTicker.jsの使い方 ステップ1. jquery.simpleTicker.jsのダウンロードと設置 GitHubよりjquery.simpleTicker.jsをダウンロードします。 jquery.simpleTickerフォルダ内に入っている「jquery.simpleTicker.css」と「jquery.simpleTicker.js」をサーバー上に設置しましょう。 <head>内に以下を追加してそれぞれのファイルを読み込みます。 <link href="./jquery.simpleTicker/jquery.simpleTicker
画像をアップロードした時に自動生成されるサムネイル画像の切り抜き範囲を手動で調整できるWordPressプラグインです。 投稿一覧などで、意図した箇所をサムネイル画像で表示させたい時に便利です。 Crop-Thumbnailsのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Crop-Thumbnailsをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Crop Thumbnailsを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。「Crop-Thumbnails」で検索します。[今すぐインストール]をクリックして、Crop-Thumbnailsをインストールします。[有効化]をクリ
Widget Optionsは、特定のページでのみ表示したり、指定した投稿タイプでは非表示にしたりと、様々な表示条件をウィジェットに指定できるようになるWordPressプラグインです。 Widget Optionsのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Widget Optionsをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Widget Optionsを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。 「Widget Options」で検索します。[今すぐインストール]をクリックして、”ウィジェット設定(Widget Options)”をインストールします。[有効化
素のJavaScriptとCSSでスクロールアニメーションを実装する方法 ステップ1. HTMLのマークアップ HTMLでは、アニメーション表示したい箇所に.animateを追加します。 <div class="animate"> スクロールアニメーション要素 </div> <ul class="list"> <li class="animate">スクロールアニメーション要素1</li> <li class="animate animate2">スクロールアニメーション要素2</li> <li class="animate animate3">スクロールアニメーション要素3</li> </ul> .animate2と.animate3は、タイミングをずらして表示するためのクラスです。.animate→.animate2→.animate3の順番で表示するようにCSSで指定します。 ステッ
私はHTMLを書く時、どの開始タグと対になっているかをわかりやすくするために、閉じタグにクラス名をコメントで付けています。 例えば、こんな感じですね↓ <div class="container"> <div class="content"> <p>文章文章文章</p> </div><!-- /.content --> </div><!-- /.container --> これくらいの行数だったらコメントがなくてもわかりますが、行数が長くなるとどの開始タグの閉じタグなのか、わかりにくくなってしまいます。 他の人が見てもなるべくわかりやすくするためにコメントを付けているのですが、今までは手動で追記していました。クラス名をコピーして閉じタグの後ろにペーストしコメントアウトする、手動でやると地味に面倒なんですよね。 ちょっと調べてみたら、VSCodeでは自動化できるではありませんか！設定方法がO
WordPress標準のサイト内検索では、中点(中黒)のありなしについても厳密に検索されます。 例えば、「プリズン・ブレイク」という単語が入った投稿を検索しようとして、「プリズンブレイク」とキーワードを入力してもヒットしません。 「プリズン・ブレイク」と中点まで入れるとヒットします。 この挙動は逆もまた然りです。「プリズンブレイク」を検索しようとして「プリズン・ブレイク」と入力してもヒットしません。もう少しあいまいにヒットしてくれても良いですよね。 そんな中点問題を解決してくれる内容が、WordPressのサポートフォーラムに投稿されていたので紹介したいと思います。 WordPressのサイト内検索で中点(中黒)のありなしに関わらずヒットさせる方法 サポートフォーラムでは検索時の中黒「・」についてというタイトルで質問が投稿されていました。回答者は、XO Featured Image Too
Block Widgetは、登録している再利用ブロックをウィジェットで使えるようにするWordPressプラグインです。 ウィジェットエリアにBlockウィジェットを追加して、表示したい再利用ブロックを選択するだけで設置できます。 Block Widgetのインストール インストール手順は以下の通りです。 Block Widgetをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Block Widgetを有効化します。 Block Widgetの使い方 再利用ブロックの作成 まずは投稿編集画面で再利用ブロックを作成しましょう。ブロック右上のメニューから[再利用ブロックに追加]を選択すると、再利用ブロックを登録できます。 作成した再利用ブロックを管理するには、画面右上のメニューボタンから[すべ
フォームでファイルを選択して送信できるようにするためには、以下のようなinput[type=”file”]を使うと思います。 このinput要素、デフォルトの見た目がイケてないですよね。Chromeで開いた場合こんな感じです。 input[type=”file”]の見た目を変更しようと思った場合、単純にinput要素にCSSを指定してもうまく変わらず、若干クセがあります。 今回は、input[type=”file”]の見た目を変更する方法と選択したファイル名を表示したり、選択したファイルをクリアする方法をご紹介したいと思います。 input[type=”file”]の見た目を変更する方法 まずは見た目を変更していきます。HTMLは以下のようにlabelで囲み、ファイル名を表示するための要素も追加します。 <label> <input type="file" name="file" clas
WordPressでは、デフォルトの状態だとSVGファイルをアップロードすることができません。投稿や固定ページの中にSVGを挿入したくても、アップロードしようとするとエラーで弾かれてしまいます。 SVG Supportは、WordPressでSVGファイルを扱えるようにしてくれるプラグインです。SVG Supportをインストールすることで、メディアライブラリにSVGファイルをアップロードできるようになります。 SVG Supportのインストール インストール手順は以下の通りです。 SVG Supportをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、SVG Supportを有効化します。 SVG Supportの設定 [設定] – [SVG Support]で細かい設定を行えます。
EC-CUBE4で新着商品の一覧や指定したカテゴリの商品一覧を表示する方法をご紹介いたします。 EC-CUBE4では新着商品を動的に表示するブロックが用意されていません。「新着商品」というブロックは存在していますが、中身はHTMLで書かれているだけで、動的に新着商品を取得しているわけではないです。 後述する方法でカスタマイズしてあげれば、新着商品を動的に取得・表示することが可能になります。そのため、商品を追加する度にブロックを編集する必要はなくなります。 また、併せて指定したカテゴリに属する商品の新着一覧を表示する方法もご紹介いたします。”新入荷”や”お気に入り”といった特定のカテゴリの商品だけを表示したいという要望は多いと思いますので、こちらも覚えておくと役立ちます。 EC-CUBE4で新着商品の一覧を表示する方法 新着商品の一覧を表示する方法については、スプレッドワークスさんの以下記事
先日紹介した「ajaxzip3」は、リアルタイムで郵便番号から住所を自動入力してくれます。郵便番号を入れるだけで自動で住所も入力してくれるので、大変便利なライブラリです。 ですが、リアルタイムでは入力してほしくないという場合もあるかもしれません。そんな時のために、リアルタイムで自動入力するのではなく、ボタンをクリックしたタイミングで住所を入力する方法をご紹介したいと思います。 ボタンクリックで郵便番号から住所を自動入力する方法 ステップ1. ajaxzip3とjQuery本体の読み込み まずは、ajaxzip3とjQuery本体を読み込みましょう。ajaxzip3にjQueryは不要ですが、ボタンクリック時に住所検索するスクリプトをjQueryで実装します。 ajaxzip3はGitHubからダウンロードするか、公開されているスクリプトを使用します。 <script src="//ajax
次のページ
このページを最初にブックマークしてみませんか？
『TechMemo | テクノロジーをメモするブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
