【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita
はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSCodeを使う人全員向け まずはじめにVSCodeで開発をしている人、全員におすすめをしたい拡張機能を紹介しておきます。 自分自身が使った拡張機能の中で「とりあえず入れて損はない」というものを厳選しています。 それでは紹介していきます。 Japanese La
【WordPress】カスタム投稿タイプのパーマリンクをカスタムするとアーカイブと個別記事が404になる（function.php） | 株式会社エンタースクウェア | Web制作
原因：リライトさせる正規表現と基本URLが間違っていた rewrite_rules_arrayを設定する時に、正規表現とリダイレクトさせる基本URL（パラメーター付きのURL）が間違っていた事が原因でした。 以下が404を解決できたソースです。 add_filter( 'post_type_link', 'my_type_link', 1, 2 ); function my_type_link( $link, $post ){ if ( 'my_post' === $post->post_type ) { // カスタム投稿名/ターム/にする $term = wp_get_post_terms( $post->ID, 'my_category' ); if(!empty($term)){ //タームが指定されている場合 return home_url( '/my_post/' .$term
WordPress 固定ページにベーシック認証を設定する方法 - by Takumi Hirashima
WordPress で特定の固定ページにベーシック（BASIC）認証を設定する方法を紹介します。 例えば、会員向けの特典ページなどで、IDパスワードを知っている特定のユーザーに見せたいページを作る時に便利な方法です。 ここで紹介する方法は、固定ページにベーシック認証を設定することを前提に説明しています。 コードを二箇所に追加 function.php にコードを追加 header.php にコードを追加 コードを二箇所に追加 特定のページにベーシック認証を設定するには、コードを function.php と header.php の二箇所に追加するだけで実装が可能です。 function.php にコードを追加 まずは function.php に次のコードを追加します。 /*【ベーシック認証】特定ページにベーシック認証を設定する */ function basic_auth($auth_
WordPressでWP-CLIを使って記事移行とかを少し楽にする | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのづやです。 ここのところ、「CSVからWordPressにデータを取り込みたい！」「ルールに沿って特定のカテゴリを違うカテゴリに付け替えたい！」などのお話を受けることが多かったので、苦労した点とかを共有したいと思います。 気軽なやり方 全然大したことない処理のときは、phpファイルを作って、WordPressだけ呼び出して処理ですね、お手軽。 <!--?php require_once "wp-load.php"; // パスは環境によって変えてね ?--> これを読み込んだら、WordPress関数が使えるので、CLIからphpとして実行したり、まあdocument rootにおいて実行して消すなりしちゃえばOKです。WordPress管理外じゃないけど、WordPressの記事を引っ張りたいときとかと一緒ですね。 たまに「wp-blog-header.php」を
Docker+WordPress+PhpStormでXdebugを使う手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
前回は、こちらの記事でDocker + WordPress + Xdebugな環境を作りました。 今回は、そこからさらにPhpStormでステップデバッグを実行できるようにしていきます。 Docker + WordPress + Xdebugの準備 はじめに、前回のDockerfileに少し手を加え、Xdebugの設定ファイルを利用できるようにします。なお、今回からはdocker-composeを利用していきますので、まずはディレクトリ構造を下記のように準備してください。PhpStormでプロジェクトを作成し、以下のようにファイルとディレクトリを用意します。 続いてxdebug.iniの中身です。 #xdebug.ini zend_extension=xdebug # Xdebugをどのモードで動かすか？ # ※これはプロセス起動時のみ設定可能なのでここでしか指定できません。 # 初期値は
WordPress 時間の表示が9時間ずれる場合の対処方法 - by Takumi Hirashima
WordPress で時間の表示が9時間ずれる場合の対処方法を紹介します。 原因によっては対処方法がことなるため、原因になる箇所を順を追って解説します。 タイムゾーンの設定を確認 テーマファイルを確認 テンプレートタグを変えてみる wp-settings.php の値を調整 テンプレートタグ date_i18n を使う タイムゾーンの設定を確認 東京を基準とした場合、まずは「管理画面」＞「設定」にある項目「タイムゾーン」の値が「東京」になっているかを確認します。 例えば、タイムゾーンが「UTC（協定世界時）」の場合は、投稿の表示時間が9時間ずれる場合があります。 テーマファイルを確認 タイムゾーンは東京なのにやっぱり時間がずれる、そんな時はテーマファイル内に date_default_timezone_set() の記述がないかを確認しましょう。 日時の取得の前や function.php
Visual Studio Code (PHPStrom) で WordPress開発環境を作る - toiee Lab
個人データは、このウェブサイトでの体験のサポート、アカウントへのアクセスの管理、プライバシーポリシー に説明されている他の用途に使用されます。 ITサポート Visual Studio Code (PHPStrom) で WordPress開発環境を作るvscode + phpcs + wpcs 概要 Visual Studio Codeを用意する（あるいは、PHPStorm）PHP関連の拡張機能をインストールphpcs (コード規約チェック）をインストール by homebrewwpcs (WordPress）をインストール by composer 前提 homebrew というパッケージ管理ソフトを入れておくcomposer というPHP専用のパッケージ管理ソフトを入れておく (1) Visual Studio Code とても便利なエディタ。情報も非常に多い。インストール情報を探して
macOSのVisual Studio CodeでPHP CodeSniffer & WordPressコーディング規約によるコードチェック環境を構築
当サイトでは、WordPress標準や配布されているテーマは使用せず自作しています。 一応、WordPressのテーマチェック機能を使い使用していない機能を除いて問題がないかチェックはしていますが、正直ちゃんと出来ているのかまだまだ不安な部分があったりします。 先日、いつも「信州 WordPress Meetup」でお世話になっているとろゆに（@Toro_Unit）さんから「PHP CodeSnifferとかでコーディング規約のチェックしてみると良い」とアドバイスいただいたので早速WordPressコーディング規約を含めてインストールしましたが、Visual Studio Codeとの連携でちょっとつまずいたので環境構築手順を備忘録的にまとめてみました。 PHP CodeSnifferとは PHPのコーディング規約チェックをしてくれるツールです。 Homebrew & Composerのイ
WordPress で最大アップロードサイズを変更する方法 - by Takumi Hirashima
WordPress で最大アップロードサイズを変更する方法を紹介します。 例えば、2MBを超えるファイルをアップしたい時に便利な方法です。 functions.php に変更を加える方法 php.ini に変更を加える方法 サーバーの設定を確認 WordPress 側で最大アップロードサイズの変更を試す前に、まずはサーバーの設定を確認してください。 XSERVER やロリポップなどの主要なサーバーでは、サーバーの管理画面でファイルのアップロードサイズを管理している場合があります。 functions.php に変更を加える方法 WordPress でファイルの最大アップロードサイズを変更する方法を紹介します。 例えば、アップロードサイズを 5MB まで引き上げたい場合は、次のコードを functions.php に追加します。 /* WordPressで最大アップロードサイズを変更する
WordPress でコピーライトの西暦を自動更新する方法 - by Takumi Hirashima
WordPress でコピーライトの西暦を自動更新する方法を紹介します。 例えば、フッターのコピーライトの西暦を更新するときに便利な方法です。 結論 date_i18n を使って年を表示する 結論 date_i18n を使って年を表示する 結論！ タイムスタンプに基づいてローカライズされた書式で日付を取得できる date_i18n() を使いましょう。 仮に date(‘Y’) などでも年や時間の取得は可能ですが、 取得する時間が9時間ずれるし、ずれるがためにタイムゾーンの指定を追加するのもごちゃごちゃして嫌ですよね。 例えば、現在の年を表示するには次のコードをテンプレートに追加します。 <?php echo date_i18n('Y'); ?> 年以外を取得したい時は適宜パラメーターを変更してください。 例えば、フッターに入れるならこんな感じでしょうか。 <footer> <small>
サルワカ | サルでも分かる図解説明マガジン
レゴランドの水遊びはどれがおすすめ？ウォータメイズとスプラッシュパッドはどっち？ 2024/06/17
テーマファイルだけで WordPress を圧縮・高速化する
ob_start('ob_gzhandler');関数をテーマファイル内で実行することで、 データを gzip で圧縮した状態で転送することができます。 ユーザに転送するデータ量が小さくなるので、ページ表示速度の高速化に繋がります。 ここでは、ob_start('ob_gzhandler'); の使い方について解説します。 注意点 あらかじめ注意点と目的について解説しておきます。 プラグインを使わない意味・目的 WordPress を高速化するためのプラグインはいくつかあります。 多くがキャッシュを利用するプラグインで、非常に高速です。 しかしながら、サーバによってはキャッシュを利用できなかったり、高速化の設定ができなかったりします。 またキャッシュ(一時的なデータ)のために要領が肥大化しますし、不具合による脆弱性も確認されています。 したがって、WordPress に限らず、技術レベルが
指定したウェブサイトのスクリーンショットをサムネイルで自動生成する
ウェブサイトのサムネイルを生成したいときに、PHPを使って自動で取得し表示する方法です。こういったサービスは色々あるんですが、国内海外気づいたらサービスが終了していた、ということがあります。 wordpressのAPIを使うんですが、そうそうここは終了という可能性は低いでしょう。（と信じたい） wordpressの場合、変数urlにカスタムフィールドなどを充てれば指定したURLから自動で表示できて楽です。その場合は $url = post_custom('url'); とすればOKです。 非公式のAPIのため、いつ終わるかはわかりませんがwordpress自体が使用しているようなので当面は大丈夫なのでは？と思います。 phpが使える環境なら簡単に使える機能です。 【2014/01/09追記】 なかなかスクリーンショットが生成されないな、毎回自動生成しているのかな、と思っていたんですがどうや
WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法
アイキャッチではなく、投稿記事内の画像を使用してサムネイルとしてトップページやサイドバー等に表示する方法です。調べていたら色々方法がありましたので、書き出してみました。 get_postsタグを使用してサムネイルを表示する get_postsを使用して投稿記事の添付画像を取得し表示する方法です。 下記のコード表示したい箇所に記入します。このコードでサムネイルサイズ（150px × 150px）のサイズの画像を表示します。 <?php $args = array( 'post_type' => 'attachment', 'posts_per_page' => 1, 'post_status' => null, 'post_parent' => $post->ID ); $attachments = get_posts($args); if ($attachments) { foreach
Webクリエイターボックスを（プチ）リニューアルしました
2014年8月19日 お知らせ 約2年半ぶりにWebクリエイターボックスのテーマをリニューアル！という事で、変更点をザックリと紹介します。とは言え全体のデザイン自体はあまり変わっておらず、細かいところや内部の修正・更新がメインとなっています。ちなみにブラウザーはChrome, Safari, Firefoxの最新版、IE11対応。Webクリエイターボックスに訪問するユーザーで、IE10以下を利用の割合は1.5%をきっていたのでバッサリ捨ててます。古いブラウザーを利用の方はアップデートしましょう ;) ↑私が10年以上利用している会計ソフト！ SVG画像 背景やアイコンなどで使うデザインパーツの画像をSVGに変更しました。レティナディスプレイのMacに変えてからというもの、どうも画像のギザギザが目についてしまって。リデザイン前のテーマでも一部SVGを使っていましたが、今回総入れ替えしました。
【セキュリティ向上】WordPress の .htaccess に追加して安全性を高めます！
安全性を高めたい、セキュリティを強化したいですの！そこで、今回 .htaccess ファイルに改善の余地ありということに気が付きましたので実践いたします♪ WordPress の .htaccess の追加部分ポイント 次を冒頭に追加しました。 <FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php)"> Order Allow,Deny Deny from all </FilesMatch> FilesMatch 部分の “^(wp-config\.php|wp-mail\.php|install\.php)” を整理します。 ^ 行頭を意味します。 () 囲った範囲をグループ化します。 \ エスケープ文字を意味します。 | 区切られた前後の正規表現のいずれかに一致します。 以上により、http://example.com の後に「
[簡易版]wordpressセキュリティ強化のための.htaccess設定例
本記事では紹介していませんが、IPアドレスを指定して、それ以外のIPアドレスを遮断する設定とかもあります。IPアドレスが絡んでくると記事が長くなるので、とりあえず簡単に運用できるものだけ書いてます。 さらに詳しい内容は、上記の[WordPress Codex 日本語版]を参考にしてください。 また、別記事wordpress(wp-login/admin.php)にBasic認証をかける方法[補足でcoreserver(コアサーバー)]にて、wp-login.phpとadmin.phpにBasic認証で簡易ロックをかける方法も書いていますので、参考にしてみてください。 下記のコードを[.htaccess]ファイルに追記して不具合(更新できないとか、画像がアップロードできないとか)が生じた場合には、コードを削除してください。 ですが、下記のコードは必要最低限のセキュリティを守る内容なので、でき
![[簡易版]wordpressセキュリティ強化のための.htaccess設定例](https://cdn-ak-scissors.b.st-hatena.com/image/square/02ba9fc7f14c6186d3523389d394d3b417d8fa70/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fwww.amelt.net%2Fwp-content%2Fuploads%2Fweb_wordpress-logo-hoz-rgb.jpg%3Ffit%3D500%252C113%26ssl%3D1){kind=logo}
wp_enqueue_script したjsファイルにphpから変数を渡す | devLog
タイトルどおりの事がしたく、調べてみるととても簡単だったのでメモ。 wp_localize_scriptというタグを使います。 たとえばphpから下のようにjsを読ませて、 wp_register_script( 'sample', get_path . '/js/sample.js', "",true); wp_enqueue_script( 'sample' ); wp_localize_scriptを追加します。こんな形になります。 wp_register_script( 'sample', get_path . '/js/sample.js', "",true); wp_enqueue_script( 'sample' ); $variable_array = array( 'hoge' => 'huga'); wp_localize_script( 'sample', 'vari
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.web-development-kb-ja.site/ja/content/%E6%9C%80%E5%88%9D%E3%81%AE%E6%AE%B5%E8%90%BD%E3%81%A82%E7%95%AA%E7%9B%AE%E3%81%AE%E6%AE%B5%E8%90%BD%E3%81%AE%E5%BE%8C%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/956897715/