サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
fantastech.net
Node.jsのインストール 今回の開発環境の構築には「Node.js」というものが必要です。 こちらのページからパッケージがダウンロードできるので、インストールしてください。 ※Node.jsについてはこちらの記事が参考になります。 作業フォルダへ移動 開発環境の構築は「コマンド」を使って進めていきます。 Macなら「ターミナル」、Windowsなら「コマンドプロンプト」ですね。 今回はWordPressテーマ内にカスタムブロックの開発環境を構築する話なので、テーマ内の任意のフォルダへ移動します。 コマンドでの移動がよくわからなければ、以下の手順で進めることもできます。 「cd」と入力半角スペースを入力任意のフォルダをターミナルにドラッグ・アンド・ドロップエンターキーをクリック package.jsonの作成 最初に初期設定として以下のコマンドを入力してエンターキーをクリックします。 n
str_replaceとpreg_replaceの特徴 「str_replace」と「preg_replace」はどちらも文字列を置換(書き換え)するために使われます。 「私はリンゴが好きです」というテキストを「私はバナナが好きです」にしたり「私はリンゴが嫌いです」にしたり、「�俺ほど酒を愛してる男はいない」のようにすべて置換することもできます。 両者の違いに関して一言で言うと「正規表現を使うかどうか」になりますが、これは後述するので詳細はここでは割愛します。 まだイマイチ理解が難しいかもしれませんが、とりあえずどちらも「文字列を書き換えるもの」と覚えておくと理解しやすくなると思います。 str_replaceの使い方 str_replaceの基本的な形はこのようになります。 str_replace('置換対象の文字列', '置換後の文字列', '置換対象の文字列が含まれている部分');
どうも、無料WordPressテーマ「4536」を個人で開発しているシェフです。 WordPressテーマに限らず、何らかの開発をする上で「管理」は必要不可欠ですが、よくある管理の方法として「日付をファイル名に付与して保存する」というものがあると思います。 2019年1月1日に修正したファイルなら「file_ver20190101」2020年8月25日に修正したファイルなら「file_ver20200825」 後は、それをローカルフォルダなりオンラインストレージなりに保存しておけば特段問題なく管理ができます。 …が、このやり方には致命的な問題(欠陥)があります。 それは、不要なファイルまで保存(アップロード)しなければいけないことと、修正箇所(履歴)がわかりづらいことです。 その他にも色々と問題はありますが、この2点はチーム開発はもちろんのこと、個人開発においても致命的な問題と言えます。
reCAPTCHAを使っているページにはロゴを必ず表示しなければいけない その前に超大事なことをお伝えしますが、reCAPTCHAのロゴは勝手に消すと規約違反になります。 つまり、CSSのdisplay:none;を指定して非表示にしたり、JavaScriptで要素を消したり、PHPの正規表現で削除したり、すべてダメってことですね。 うわ、reCAPTCHAの規約で非表示にできないのか… これ、せめてお問い合わせページだけに表示したいんだけど、Contact form側に専用のフィルターとかあるのかな?https://t.co/sYsSo3Cjo2 — シェフ (@chef_moriawase) December 12, 2018 前のバージョンでは「私はロボットではありません」にチェックを入れて、自動車やら信号機やらの画像を判別していたのでそういったロゴを表示する必要がありませんでしたが
テーマカスタマイザーとは? テーマカスタマイザーとは、外観→カスタマイズと進むと表示される「テーマカスタマイズ画面」のことです。 サイト基本情報背景画像メニューウィジェット追加CSS などの設定項目がデフォルトで用意されており、ここにオリジナルの設定項目を追加して拡張することができます。 有名なWordPressテーマには、必ずといっていいほどオリジナルのカスタマイズ項目が用意されており、この設定項目の多さがテーマ選びの重要なポイントにもなっています。 テーマカスタマイザーの拡張方法 ただ、オリジナルテーマを作成しない限り、テーマカスタマイザーを拡張する機会がないので、 どうやって設定項目を追加すればいいのか1で設定したものをどうやって読み込めばいいのか わからない方も多いと思います。 そこで今回は、初めてテーマカスタマイザーを拡張する方向けに、設定→読み込みまでの手順をご紹介します。 お
きっかけはAmazon これまで、たくさんのカスタマイズに挑戦してきたんですが、すべて満足な結果になったわけではなく、少しだけ「妥協」したカスタマイズもありました。 その中でも特に悔しかったのが「横スクロール」にするカスタマイズ。シンプルなカスタマイズにしようとした結果、パソコンでの操作性が悪くなってしまったんです。 パソコンで横スクロールする方法がわからない方もいると思うので、この為にわざとスクロールバーを太くしました。 スペースをクリックすると横スクロールすることも…わかってくれるよね!きっと! 良いアイディアが思いつかず、そのままにしていたんですが、パソコンで「Amazonのサイト」を見て閃きました。 「あ、左右のボタンでスクロールできれば解決じゃん」 ボタンをクリックする度にスクロールさせたい はい、ということで、今回挑戦したのは、Amazonのサイトのように「ボタンをクリックする
色の設定項目を追加する手順 では、テーマカスタマイザーに色の設定項目を追加してみましょう。 下記のように関数を定義し、この中に、 セクション追加 テーマ設定 コントール追加 といった処理をどんどん追加していきます。コードを追加するファイルは「functions.php」です。 function theme_customizer_extension($wp_customize) { //処理をどんどん追加 } add_action('customize_register', 'theme_customizer_extension'); セクション追加 オリジナルの設定項目を追加する上で、通常はセクションを追加する必要がありますが、色のセクションがすでにあるので、新しくセクションを追加する必要はありません。 (もちろん、新しくセクションを追加して管理することもできます) テーマ設定 セッティン
よく使う横並び&横スクロールさせる方法 要素を横並びさせて横スクロールさせる方法と言えば、よく使うのはやはり「float」ですよね。 横並びさせる複数の要素(A)をフロートさせる フロートさせる要素を包む要素B(要素Aの親要素)に幅を指定する 要素Bの親要素Cに「overflow-x: scroll(auto)」を指定する これで、要素が横並びになり、かつ、横スクロールさせることができます。 ▼サンプル See the Pen horizontal-scroll-demo1 by Chef (@chef-aomori) on CodePen. 子要素が動的に変化する時には使えない しかし、さきほどの方法には弱点があります。それは「子要素が動的に変化する時には使えない」ことです。 横並びしてる要素Aの幅が動的に変化する 要素Aが増えたり減ったりする など。 ▼サンプル(要素が増えて、2段にな
デフォルトのメニュー位置 こちらがデフォルトのメニュー位置。 メニューを開くとこんな感じ。 ヘッダーの右上に固定するカスタマイズ 「めっちゃ気になる!早く教えろ!」という方は、ぜひ見てください。それ以外の方も見てください。 先に言っておくと、今回のカスタマイズはめちゃくちゃ簡単です。一回でもカスタマイズをした方は難なく終わるはずです。 カスタマイズ後はこんな感じになります。 カスタマイズ後のメニューを開いた状態。 カスタマイズ方法 今回カスタマイズするのは、スタイルシート(style.css)のみ。 ワードプレス→管理画面→テーマの編集と進み、style.cssを編集します。 (※必ずバックアップをとってからお試しください) では、早速カスタマイズしてみましょう。 最初に、下記のコードを探します。デフォルトでは2589行目にあります。 #header #logo { float: none
カスタマイズのゴール 今回のカスタマイズのゴールはこちらです。 LINEのような色にすることもできます。 もちろん、レスポンシブに対応するようにしました。では、コードをご紹介します。 HTMLコード まずはHTMLのコード。下記のコードの日本語の部分を変更するだけで「左からの吹き出し」が作れます。 <div class="balloon"> <figure class="balloon-image-left"> <img src="画像のパス(URL)" alt="画像名"> <figcaption class="balloon-image-description"> 人の名前や画像の説明 </figcaption> </figure> <div class="balloon-text-right"> <p> 吹き出しの中のテキスト </p> </div> </div> 「右からの吹き出し
たくさん失敗してください イケダハヤトさんが何度も「ブログをたくさん更新しろ」という理由。 そして、その言葉の意味。それは極めてシンプルです。 「たくさん失敗するから」 ブログのネタがない なんか書く気にならない 俺なんかがこんなこと書いていいのかな 私のブログなんて誰も読んでないし こんなこと思ってもいいから、とにかく書きましょう。 書くべきです。書かなきゃ始まりません。失敗しましょう。 「ブログをたくさん更新するのは数撃ちゃ当たるから」と思っている方もいる方もいるかもしれませんが、少しニュアンスが違います。 あなたが実感すべきことは、「あ、適当に撃ったら当たっちゃった♪」ではなく、「89発外したけど、90発目くらいから的に当たるようになってきたなぁ」です。 成功しやすい人ではなく、失敗に気づきやすい人 たくさん失敗すると、誰でも考えます。 「100発弾があるから、全部適当に撃っちゃえ〜
TinyMCE Templatesをインストールする 当初僕が考えていた方法は3パターン。 クイックタグを使ってボタン一発で会話風のテキストを呼び出すショートコードを登録して呼び出す会話風のテキスト(コード)をテンプレートとして登録して、任意の場所で呼び出す この中で誰でも簡単に使えるのが「テンプレートに登録する」3つ目の案です。 「TinyMCE Templates」というプラグインを使えば、それが可能になります。 みなさんが使っているであろう、あの有名なプラグイン「TinyMCE Advanced」との関係性はよくわかりませんが、「TinyMCE Advanced」がなくても使えます。 プラグイン嫌いの僕がこのプラグインをおすすめする理由はこちら。 ショートコードを覚える必要がない知識がなくても、いくつも吹き出しパターンを作ることができる実際の表示を確認しながら、記事が書ける後でこのプ
このページを最初にブックマークしてみませんか?
『fantastech.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く