サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
yukiyuriweb.com
WordPress でサイト制作をしていると必ずと言っていいほどお世話になるのが、問い合わせフォームを簡単に設置できる Contact Form 7 です。有名なプラグインだけあって多くのサイトで設定方法などが解説されていますが、がっつり開発者向けの記事は見かけません。ということでここでは Contact Form 7 をプラグイン/テーマ開発者向けに解説します。記事内で引用しているソースのバージョンは、記事公開時の最新版 v5.4.1 です。 カスタム投稿タイプ wpcf7_contact_form について サイドメニューの「お問い合わせ」で表示されるコンタクトフォーム一覧ですが、これらはカスタム投稿タイプ wpcf7_contact_form として wp_posts テーブルに保存されています。コンタクトフォームをページ内に表示させる際に エラー: コンタクトフォームが見つかりませ
最近NFTという言葉をよく耳にすることが増えてきました。芸能人や有名人もNFT参入という話もどんどん出てきて、盛り上がってきていますね。 NFTの取引で有名なOpenSeaは、イーサリウムだけではなく他にもPolygonやKlatynと言われるブロックチェーンにも対応しています。そしてこのPolygonというブロックチェーンを使うとなんとガス代フリー!トランザクションフィーもフリー!で出品できちゃいます。 NFTって正直イマイチよくわからなくて難しそう…でも一獲千金を夢見て挑戦してみよう!と思って色々と調べてOpenSeaにも登録してみたけど、いざ出品する時にイーサリウムのガス代が高すぎて心が折れてしまいそうになった!という私のような方がもしいらっしゃったら、この記事を参考にPolygon上での出品を試してみてもらえれるといいなと思います。 (この記事はOpenSeaのアカウントを開設済み
タグ関連 get_the_tags アーカイブページ・投稿ページで投稿につけられたタグ情報を配列として取得します。主にループ内で使用します。 /** * @param int $id 投稿ID */ (array|false|WP_Error) get_the_tags( int $id = 0 ) https://developer.wordpress.org/reference/functions/get_the_tags/ 使用例 <?php if ( get_the_tags() ) { ?> <div class="tags"> <i class="fas fa-tag"></i> <?php the_tags( '', ',', '' ); ?> </div> <?php } the_tags アーカイブページ・投稿ページで投稿につけられたタグが出力されます。主にループ内で使用
今年は2月にwebpack 4がリリースされ、4月にNode ver.10がリリース、Babel 7もリリースを間近に控えるなど、フロントエンド周りのバージョンアップが相次いでいます。ここでは webpack 4 + Babel 7 の開発環境で React + Mobx を動かすための設定をまとめておきます。Mac + node v10.3.0で動作確認をしています。 パッケージのインストール まずは適当なフォルダに移動してpackage.jsonを作成します: yarn init ついでReact関連をインストールします: yarn add react react-dom mobx mobx-react 開発環境のインストールはこんな感じです: yarn add @babel/core @babel/plugin-proposal-class-properties @babel/plu
ホームページ制作でWordPressのテーマを作っていると、functions.php で add_action や add_filter を使うことがよくあると思います。テーマをよりカスタマイズしたりプラグインを制作したりすると、このあたりをしっかり理解するというのは避けて通れません。言い方を変えると、アクションフックやフィルターフックを使いこなせるようになると WordPress のカスタマイズの幅が劇的に広がります。ということでここではアクションフックとフィルターフックについてみていきます。具体的なアクションフック・フィルターフックの利用例は「【WordPress入門】アクションフック・フィルターフックを使い倒してWordPressをカスタマイズする」にまとめていますので、そちらも合わせてご覧ください。 主要なアクションフック テンプレート表示時に有用なアクションフック テーマのテ
ここでは WordPress の中身を覗くで、WordPress で作られたサイトがブラウザで表示されるまでどのようなファイルが読み込まれて何が起こっているのかを調べてみようと思います。記事を読みながらファイルを確認したい方はWordPressの公式サイトから WordPress をダウンロードしてください。ダウンロードしたzipファイルを解凍すると wordpress という名前のフォルダが出来ると思います。この中のファイルを見ていきます。 なおこの記事では WordPress 5.7 の中を覗きます。 はじめに: WordPress の構成要素 WordPress は大きく分けて4つの構成要素から成っています。 コアシステム すべての基礎です。これが WordPress の本体であって、ここなくして WordPress は機能しません。例えばテーマ開発でよく見る get_header
amp-analyticsの基本からクリックイベント・スクロール量の計測を行うサンプルコードまで – AMP HTML入門 去年2015年10月のAMP発表当時はGoogle Analyticsでのトラッキングのためにamp-pixelを使う必要がありましたが、amp-analyticsコンポーネントの導入によって簡単にトラッキングコードを作成することができるようになりました。2016年10月にはGoogle Tag ManagerでもAMPがサポートされるようになり、ますますAMPの環境が整ってきたという印象です。ということでここではGoogle Analyticsの基本からamp-analyticsの説明、ページビューのトラッキング、クリックイベントのトラッキング、スクロール量の計測を行うためのコードを紹介します。 まずはGoogle Analyticsの基本の基本を押さえる Goog
久しぶりにWordPressを使うことになって、いざローカル環境で動かそうとしたらMySQLで色々エラーが出たのでクリーンインストールしました。ということでMySQLのクリーンインストールとそのときに出会ったエラーと対処法をまとめました。もうこれでMySQLでイライラしない…はず… MySQLを終了&残っているプロセスをKILL まずはMySQLを終了させて、関連するプロセスをKILLしていきましょう。 mysql.server stop ps -ef | grep mysql kill -KILL PID PIDはプロセスIDです。例えばps -ef | grep mysqlで 502 41022 1 0 Thu02PM ?? 0:00.02 /bin/sh /usr/local/opt/mysql/bin/mysqld_safe --bind-address=127.0.0.1 --d
AMP HTMLを使っているとamp-carouselの左右のボタンなんかがそうなんですが、background-imageにSVGのコードをベタッと貼り付ける場面があったりします。そのときにIEの対応まで考えるとdata URI自体をパーセントエンコードする必要が出てきます。ということでIEにも対応した、背景画像にdata URIスキームを使う際の注意点を書きました。 SVGを背景画像に使う CSSの背景画像にdata URIスキームを使うときの書式の基本は .data-uri-scheme { background-image: url("data:image/svg+xml;utf8,base64,[データ]"); } です。先頭の"data:"がURIスキーム、"image/svg+xml;"がcontent typeです。データ形式がbase64形式ではなくSVGコードを使う場合
Haml や Slim は Ruby の HTML テンプレートエンジンですが、Jade は JavaScript の Node.js で実装されたテンプレートエンジンです。なのでインストールするときは Ruby の gem じゃなくて npm です。GitHub のリポジトリの説明にあるサンプルコードはこんな感じです: doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) bar(1 + 5) body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! p. Jade is a terse and simple
このページを最初にブックマークしてみませんか?
『滋賀/京都/大阪でホームページ制作ならYUKiYURi WEB』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く