やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

WordPress、自動更新しちゃヤダ

今日、WordPressが6.0に更新されたわけですが使用テーマのアプデが間に合ってなかったり、そもそも自作テーマだったりすると、トラブル起こりがち。 なので自動更新に待ったをかけようと思ったら、wp-configの編集が必要だった。(管理画面から設定できてほ…

MacのPagesで台本を書く

台本、つまりこのようなレイアウトを実現する(今回は横書きです) タブの設定 タブキーを押した際のインデントの幅(?)が一定になるようにする。 表示 > ルーラを表示 セリフの最初のところにカーソルを合わせる ルーラ上の丁度よいところ(4のあたり)を…

SWELLのlightbox(luminous.js)で画像拡大時にもキャプションを表示させる

大好きなWordPressテーマ、SWELL。 SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ SWELLにはlightbox機能(Luminous Lightbox)が標準搭載されており、別途で画像にリンクを設定していない場合は、画像をクリックすると拡…

WordPressのギャラリーのサムネイルの高さ(アスペクト比)を統一する

WordPressのブロックエディターの「ギャラリー」機能。複数画像を並べるのに便利なんだけど、横長画像と縦長画像が混在した場合、縦長画像の方に高さが統一されるため横長サムネの行と縦長サムネの行が存在してしまったりして、見た目がちょっと微妙だった。…

PHPのバージョンアップがWordPressの管理画面に反映されない

人から改修を頼まれたWordPressサイトにて。ダッシュボードやサイトヘルスに「PHPの更新が必要です」と表示されている。レンタルサーバーのコントロールパネルへ行き、7.4(モジュール版)に更新するボタンを押して、5〜10分以上待ったのに、アラートの表示…

JavaScriptで現在のページのURLを取得して条件分岐

英語のページ(URLに /en/ が含まれる)全てにおいて、 ヘッダーロゴのリンク先を英語版のHomeに設定したかった。body閉じタグ直前にこちらを… <script> let url = location.href; let pattern = '/en/'; if(url.indexOf(pattern) > -1){ let link = document.getEle…

CSSでhtmlのdir=rtl属性を指定する(アラビア語対応)

そんなことある?って感じなんだけど、サイトの多言語化対応で、英語・アラビア語のサイトを作っている。アラビア語って、右から左に書く言語。なので当然サイトが全部 dir="rtl" になるってワケ。そりゃレイアウト崩れるとこも出てくる。 CSSで崩れたとこ直…

placeholderをjavascriptで書き換える

多言語サイトを作っていて、「検索」を「Search」に変えたかった。 const hoge = document.querySelectorAll('#search input')[0]; hoge.placeholder = "Search"; ほんとうに些細なことなんだけど、1行目末の[0]が必須だった。 これに気づかなくて、 なかな…

印刷用CSSを別ファイルで用意せずに済ませる

別ファイルで用意するの正直めんどくせ〜と思っていたが、 メディアクエリで書けば簡単 1. CSSファイルをmedia="all"で読み込む <link rel="stylesheet" media="all" href="~~~~/style.css"> 2. @media print{ で書いていく /**********印刷用**********/ @media print{ body{ color: #000; background: transparent; }</link>…

単語の途中で改行されなくてレイアウトが崩れる時

単語じゃなくても、クライアント様がブログ本文に入力した装飾 「●○●○●○●○●○●○●○●○●○●○●○●○●○●○」 みたいなやつで崩れたりする。 (そういう装飾を自分では使わないから、予測できなかった)単語の途中でも改行されるようにCSSを書き加えるんだけど、 いつも…

カスタムフィールド内のWYSIWYGエディターの見出しを制限したかったが、できなかった

カスタムフィールドのプラグインとして、 現在はSmart Custam Fields を使っている。 b-risk.jp WYSIWYGエディターの項目も作れるんだけど、 そのエディターの中の「見出し」を制限したかった。(デフォルトだと「段落」「見出し1~6」「整形済みテキスト」か…

中サイズ、大サイズのアイキャッチ画像もトリミングする

functions.phpに以下を追記するだけ。 //中サイズ画像をトリミングする update_option( 'medium_crop',true ); //大サイズ画像をトリミングする update_option( 'large_crop',true ); 以降にアップロードしたアイキャッチ画像にはトリミングが適用される。 …

noteからWordPressへの記事の移植が大変だった

多数の画像や埋め込みを含む約50記事を、noteからWordPressにお引越しさせました。note エクスポート機能ついてないの、つらい ブラウザ機能の「ページを保存」だと不十分 noteのコンテンツは動的に生成される部分が多くて、 「ページを別名で保存」だと使い…

Event Organiser のイベントカテゴリー(+背景色)を出力

カレンダーを表示させるのに、EventOrganiserというプラグインが便利 wp-event-organiser.com 使い方はドキュメンテーションにだいたい書いてある。docs.wp-event-organiser.comショートコードでカレンダーやイベントリストを表示させたりできる。 イベント…

WordPressテーマでウィジェットを有効にする

1. functions.php を編集 'Main Sidebar', 'id' => 'main-sidebar', ) ); } add_action( 'widgets_init', 'my_theme_widgets_init' ); ?> 2. 管理画面でウィジェットを登録 Main Sidebar というエリアが現れてるので、そこにウィジェットを登録する 3. テン…

さくらVPSでPHPをアップデートする

面倒くさすぎて嫌だけど、やる。WordPress速くしたいので。。※ 7.4にしようと思ったけどできず、結果的に7.0→7.3になった顛末です 参考 qiita.comkz-style.comblog.offline-net.comhttps://monochrome-design.jp/blog/126 まず CentOSを新しくする rootユー…

WordPressアーカイヴページにページネーション

数字で表示される、こういうタイプのもの WordPressに標準の関数が用意されている。the_posts_pagination() wpdocs.osdn.jp 2, 'prev_text' => __( '&laquo;', 'textdomain' ), 'next_text' => __( '&raquo;', 'textdomain' ), ) ); ?> しかしページ送りの…

WPで最近使ってるプラグイン備忘録

Avatar Manager ユーザーアバター 標準のGravatorは外部サービスだけど、 これを使えばWP内に執筆者の画像をアップできる Intuitive Custom Post Order 投稿順番入れ替え これがないと困る 公開日をいちいち変えたりするのは嫌なので Public Post Preview 執…

2020版 WordPressダッシュボードカスタマイズ

ダッシュボードトップの項目を減らす

CSSで背景うっすら斜め変則ドット

黒のベタ塗りだとカッコつかないな…という時、うっすら斜めドットにすると良い感じである。 background: #3d3d3d; background-image: radial-gradient(#333 20%, transparent 20%), radial-gradient(#333 35%, transparent 35%); background-repeat: repeat;…

コンタクトフォーム7 + reCAPTCHA v3

WordPressのお問い合わせフォームにGoogle reCAPTCHA reCAPTCHA v3はバックグラウンドで動くので、 ユーザーに絵合わせ(?)させたり、チェックを入れさせたりしなくて良いらしい。 reCAPTHCA登録 ログイン - Google アカウントGoogleログイン状態で、ここ…

WordPress カスタムタクソノミー

カスタム投稿に、カテゴリータイプのカスタムタクソノミーをつける __( '本の種類' ), 'show_in_rest' => true, // Gutenbergエディタでは必要らしい 'show_ui' => true, //管理画面から編集できるようにする 'hierarchical' => true, //falseにするとタグ…

WordPressでiframeだけoEmbedが効かない問題

いまどきのWordPressは、YouTubeやGoogle mapのURLをコンテンツエリアに貼るだけで自動的にiframe埋め込みをしてくれるのですが、この機能は oEmbed というヤツが担っています。 iframeだけ効かなくなった あちこちテーマをいじっていたら、ある日突然、自動…

microCMSとJavascriptを利用して簡単なサイトを作る

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。microcms.io APIスキーマ 今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。 フィールドID:textField …

メモ:jQueryあれこれ

html、cssは省略します 全体魔法 window.addEventListener('DOMContentLoaded', function(){ // ここに全部書く }); なんでか $(function(){ }); だとエラーが出やすいので スムーススクロール(スムーズスクロール)? $('a[href^="#"]').click(function(){…

jQueryで、loading

JavaScriptがそもそも苦手すぎて、 どうもVueとかReactをやる気になれない。結局たよりになるのはjQuery、、、 気をつけたところ Scriptは、対象となるDOM要素(#loader-bgなど)の後ろに書かないと、 エラーが出ることがあるっぽい。 追記2 一瞬ちらっと見…

【解決】Contactform7 動作しない・ページがリロードされてしまう問題

WordPressのお問い合わせフォーム、Contactform7送信ボタンを押しても、ページが再読み込みされるだけで何も起こらないという謎のバグを引き起こし、そして解決した。 二重formタグが原因だった tanweb.netこれです! なんでそんなミスを mvp.cssを使ってお…

SVGファイルに色指定

path に fill を指定してあげるだけ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#666666" d="〜〜〜〜〜〜"/></svg>

FirebaseでBasic認証かける

qiita.comまぁ、こちらに書いてある通りなのですが… Firebaseコンソール上でプロジェクト作る ローカルにディレクトリ作って、ターミナルでそこへ行く ここまでは Hosting の時と同じ firebase init ( ) Database: Deploy Firebase Realtime Database Rules …

Firebaseを使ってみよう

色々あって Git・GitHub + Netlify に心を折られたので、 Firebaseに鞍替えします。blog.katsubemakito.netこちらの手順どおりに。 npmエラー → sudoで解決 node.jsをインストールしたあと、 $ npm install -g firebase-tools を実行しようとしたらエラーが…