Cocoon

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS） とりあえずのメモ

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の見出しの前...
2024.08.29 2024.08.30
とりあえずのメモプログラミングホームページ運用
[Cocoon] アイコンリストで二項対立のスライドを作るCSS とりあえずのメモ

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立（dichotomy）のスライドになります。追加されたCSSポイントは、 display: flex; j...
2024.08.18 2024.08.19
とりあえずのメモプログラミングホームページ運用
ブログカード抜粋の先頭に「関連」を付けた プログラミング

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...
2024.08.08
プログラミングホームページ運用
[Cocoon] ブログカードを2列に並べるCSS とりあえずのメモ

[Cocoon] ブログカードを2列に並べるCSS

メッセージ動画の一覧を並べるために、Cocoonのブログカードに「thumbnail-only」のCSSクラスを追加しました。style.cssに以下のコードを追加しました。ポイントは、「display: flex」と「flex-wrap: wrap」です。/** 2024-07-01 ブログカードを2列に並べるCSS */.blogcard-type.thumbnail-only .blogcard-snippet{ display: none;}.blogcard-typ...
2024.07.01
とりあえずのメモプログラミングホームページ運用
[CSS]ラベルボックスをスライド画像風にした プログラミング

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...
2024.06.17 2024.08.18
プログラミングホームページ運用
[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した とりあえずのメモ

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。 追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...
2024.06.02
とりあえずのメモプログラミングホームページ運用
[WordPress]インデックスされていた変なURL “page/74/?cat=-1”を除外した（functions.php） とりあえずのメモ

[WordPress]インデックスされていた変なURL “page/74/?cat=-1”を除外した（functions.php）

WordPressサイトのGoogle Search Consoleで、「page/74/?cat=-1」のような変なURLがインデックスされていました。このような記事一覧ページを検索インデックスから除外するために、functions.phpにコードを追加しました。page/74/?cat=-1とは？（記事一覧ページ）Google Search Consoleのインデックス済みのページを眺めていたら、変なURLがありました。 https://chiilabo.co.jp/pa...
2024.05.23
とりあえずのメモホームページ運用
[Cocoon] ブログカードのラベルを小さくしたけど とりあえずのメモ

[Cocoon] ブログカードのラベルを小さくしたけど

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。そこで、ラベルの大きさを少し小さくしてみました。/** ブログカードのラベルを小さく 2024-05-19 */.blogcard-label { top: -22px; left: 0px; padding: 0px .6em;}Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。しかし、スタイルシートを変更して表示を確認したところ、予想と異なる...
2024.05.19 2024.08.08
とりあえずのメモホームページ運用
モバイルヘッダーロゴが中央になっていたので左に直した（Cocoon 2.7.3.1） とりあえずのメモ

モバイルヘッダーロゴが中央になっていたので左に直した（Cocoon 2.7.3.1）

スマホで自サイトを表示したら、ロゴの左端から中央に変わっていました。サイトロゴはもともとは中央で、自サイトでは以前にカスタマイズしていたところです。style.cssのロゴクラス（.mobile-menu-buttons .menu-button.logo-menu-button）に「justify-content: flex-start」を追加して戻しました。ちょうどCocoonテーマの更新で 2.7.3.1になっていました。環境WordPress：6.5.2、PHP：8....
2024.04.26 2024.05.12
とりあえずのメモプログラミングホームページ運用
[Cocoon] サイトロゴのリンク先をページ種類で変えた（WordPress） とりあえずのメモ

[Cocoon] サイトロゴのリンク先をページ種類で変えた（WordPress）

Cocoonテーマでサイトロゴのリンク先を変更したいと思って、 functions.phpをカスタマイズしました。add_filterで「'mobile_header_site_logo_url'」の処理で条件分岐するようにして、記事ページとトップページではブログ一覧に移動するように変更しました。ロゴのリンク先を分岐させたいサイト上のロゴを押したとき、通常はトップページに移行します。しかし、記事上に限ってはブログ一覧ページに移行するように変更しようと思います。以下のコードを ...
2024.04.21
とりあえずのメモプログラミングホームページ運用
[Cocoon]タグ一覧から1記事しかないタグを除外した（WordPress） とりあえずのメモ

[Cocoon]タグ一覧から1記事しかないタグを除外した（WordPress）

WordPressのCocoonテーマのタグ一覧で、1記事しかないタグを非表示にするように、functions.phpのショートコードを修正しました。記事数が2以上のタグを降順で表示するようにしたら、タグ一覧がスッキリして関連記事を探しやすくなりました。生成AIでコードの修正案を生成したので、数分でできました。環境WordPress, Cocoonテーマさらにタグ一覧をカスタマイズした以前、WordPressサイトで記事のタグ一覧を表示するショートコードを作りました。しかし、...
2024.04.13 2024.04.21
とりあえずのメモプログラミングホームページ運用
[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク) とりあえずのメモ

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

Cocoonテーマの「ブログカード」を使ってYouTube動画を埋め込んでいるのですが、たまに外部ブログカードとして表示されてしまうことがあるんです。原因を調べてみると、YouTubeで公開前処理が終わる前に埋め込み動画を設置したことや、URL貼付け時に「リンク」に自動変換されていることが関係しているようです。埋め込み動画を設置するには、YouTube上で閲覧可能になるまで待って、URLに付いたリンクを削除する必要があります。ブログカードで動画を埋め込んでいるブログ内にYou...
2024.04.10 2024.04.14
とりあえずのメモトラブルと対処ホームページ運用
WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon] とりあえずのメモ

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。Cocoon バージョン：2.7.2.5で修正されました。環境Cocoonバージョン: 2.7.2.3WordPress: 6.5ブログカードが妙に縦に伸びているブログカードに複数URLを挿入する運用をしています。WordPress6.5にアップデート後に、ブロ...
2024.04.04 2024.04.10
とりあえずのメモトラブルと対処プログラミングホームページ運用
[Cocoon] 「SNSシェア」ボタンをショートコードで表示できるようにした とりあえずのメモ

[Cocoon] 「SNSシェア」ボタンをショートコードで表示できるようにした

記事内で、以下のショートコードを入力することで、好きな位置にSNSシェアボタンを出せるようにしたいと思います。[sns_share_buttons]できたコード（functions.php）はこちら。/** CocoonのSNSシェアボタンを表示するショートコード 2024-02-18 */add_shortcode( 'sns_share_buttons', 'wrap_get_template_sns_share' );if ( ! function_exists( 's...
2024.02.18
とりあえずのメモプログラミングホームページ運用
教室のトップページの色数を減らしてみた とりあえずのメモ

教室のトップページの色数を減らしてみた

教室のトップページを「すっきり」した印象にしようと、白基調にして要素の色数を減らしてみました。枠を目立たなくして、中の背景色を白にしてみました。こちらもどうぞ。（参考）短時間で得られる刺激から距離を置く | Piyopanman
2024.01.24
とりあえずのメモホームページ運用
[Cocoon] ブログカードを編集するとURLだけが表示されるようになった？（Cocoon 2.6.3.2） とりあえずのメモ

[Cocoon] ブログカードを編集するとURLだけが表示されるようになった？（Cocoon 2.6.3.2）

最近、過去に入れていたリンクがCocoonのブログカードになっていないことがあります。ブログカード内を編集したタイミングで、ブロックのHTMLの整合性が崩れるようです。いったん、「書式を削除」して、行頭の余分な空白を消し、改行しなおすと元に戻せます。ブロック内の改行の扱いが<p>から<br>に変更になっているようです。WordPress 6.3にアップデート後の仕様変更によるもので、Cocoonの最新版（Cocoon 2.6.3.3）では、対応されました（追記：2023年8月...
2023.07.27 2024.04.04
とりあえずのメモホームページ運用
[Cocoon] 広告位置でAdSenseのモバイル広告サイズが違う？ とりあえずのメモ

[Cocoon] 広告位置でAdSenseのモバイル広告サイズが違う？

モバイル広告のサイズは広告コードの入れ方で変わります。自動広告だと広告スペースの位置や大きさを認識して自動的にサイズを決めます。モバイル対応のレスポンシブ広告にするには、「オート」ではなく広告ユニットを設定します。本文中などだと逆に大きく表示されました。モバイル広告のサイズと広告コードAdSenseのコードの入れ方によって、モバイル広告のサイズが違うことに気づきました。左は、Cocoonの「広告」設定で挿入した広告で、右 2つは、Cocoonの「広告」ウィジェットで挿入した広...
2023.07.18 2023.07.22
とりあえずのメモホームページ運用追記予定の話
サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon] とりあえずのメモ

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。Largest Contentful Paint を速めるのに、ちょっと効果がありました。項目FontAwesome 5FontAwesome 4パフォーマンス9294First Contentful Paint1.9 秒1.8 秒Largest Contentful P...
2023.07.15 2023.07.16
とりあえずのメモホームページ運用
とりあえずのメモ

Cocoonの「事前読込みドメイン」を減らした（DNSプリフェッチ）

ついでに、「LiteSpeed Cacheのは、Cocoonの機能と重複する」ということで、Cocoonの事前読込み設定も確認してみました。DNSプリフェッチ事前読込みは、「DNSプリフェッチ」と「preconnect」に関係しています。ドメイン名からIPアドレスを求める処理（DNSの名前解決）にかかる時間は平均して 200ミリ秒と言われています。要は、アクセスしそうなドメインの IPアドレスを事前に調べておくことです。Webブラウザーやアプリケーションにおいて、リンクで指定...
2023.07.15
とりあえずのメモホームページ運用追記予定の話
[Cocoon] LiteSpeed Cacheを改めて使ってみる とりあえずのメモ

[Cocoon] LiteSpeed Cacheを改めて使ってみる

PageSpeed Insightsをみると、あとは「サーバーの応答時間」を改善するぐらいです。以前、サーバーキャッシュを設定したら、更新が反映されなかったり、ページ内のランダム要素が固定化したり、とかえって困ることがありました。改めて調べてみたら「LiteSpeed Cacheの不具合の少ない設定方法と使い方 | マニュオン」での解説がわかりやすかったので、LiteSpeed Cacheのプラグイン設定に再挑戦しました。ただ、結果としては パフォーマンススコアが「85」→「...
2023.07.14 2023.07.15
とりあえずのメモホームページ運用
[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした とりあえずのメモ

[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした

以前に、モバイルフッターメニュー（共有ボタンやいいねボタン）を作ったときにスタイルを追加していました。その後、Google AdSenseのフッター広告と重なるので削除していました。ただ、style.cssにそのときのスタイルが残っていたので削除しました。後で、CSSを戻せるようにメモ。style.css.mobile-menu-buttons .fa-line:before { font-family: "icomoon"; content: "\e915"; positi...
2023.07.13
とりあえずのメモホームページ運用
[Cocoon] サイトのキーカラーを変更した とりあえずのメモ

[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。サイトの配色を試行錯誤元の配色です。臙脂色を基調した配色。焦げ茶色をメインにした配色。それをさらに濃くした配色です。「ユーザー補助」「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。パッと見でも、文字が読みやすくなったと思います。CSSでのカスタムカラー追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color...
2023.07.11 2023.07.13
とりあえずのメモホームページ運用追記予定の話
[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw） とりあえずのメモ

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）

PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。主な原因は、トップページで表示しているカルーセルです。CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。カルーセルがCLSに悪影響しているCLS（画面ズレ）が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、一度 広...
2023.07.03 2023.07.04
とりあえずのメモホームページ運用
[Cocoon]「pinit_main.js」を削除するには？（Pinterest） SNS

[Cocoon]「pinit_main.js」を削除するには？（Pinterest）

Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。CocoonのSNSシェアの Pinterestが有効だと、フッターに「」の読込みが挿入されていました。 <?php //Pinterestシェアボタン用のスクリプト if (is_singular() && (is_top_pinterest_share_button_v...
2023.07.02 2023.08.21
SNSとりあえずのメモホームページ運用追記予定の話
[Cocoon] AMPとPWAをオフにした とりあえずのメモ

[Cocoon] AMPとPWAをオフにした

WordPressのテーマ、Cocoonのアップデートがあり、2.6.1になりました。興味深いのが、AMP・PWAが非推奨になったことです。Cocoon設定のAMPとPWA機能を非推奨化しました。AMP機能を有効化する（非推奨）PWAを有効化する（非推奨）これらは昨今のウェブ情勢を鑑みたところAMP・PWAを設定するメリットよりデメリットの方が上回ると考えられるからです。現時点で機能自体は利用できますが、後々に完全に廃止しようと思います。Cocoon 2.6.1公開。段落ブロ...
2023.06.14 2023.06.15
とりあえずのメモホームページ運用
[PHP] タグ一覧に件数を追加する（Cocoon） とりあえずのメモ

[PHP] タグ一覧に件数を追加する（Cocoon）

ショートコードで表示している、ブログの記事のタグ一覧に、「件数」を追加しました。「タグリンク」をタップしても表示される記事が少ないと、別のタグを探し直さないといけないからです。前回はこちら。「クリック率向上のために！WordPressで「タグ一覧」に「記事数」を追加する方法」のコードを元に、ショートコード用関数にするために echo の部分を return にして、文字列を返すようにします。// the_tags_with_count() の末尾echo $before . ...
2023.05.21 2024.04.21
とりあえずのメモプログラミングホームページ運用
[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】 とりあえずのメモ

[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】

なぜか、Cocoonのテーマ設定のソースコードが反映されませんでした。CSSセレクタを設定し直したら、うまく動きました。highlight.jsが動作しないCocoonテーマには、ソースコード ハイライト機能があります。これは、highlight.jsを利用しています。しかし、Cocoon設定では、ちゃんとハイライト表示にチェックがつけたのですが、記事内のソースコードがそのままでした。これまで うまくコードハイライトが表示されない原因は、「スクリプトの遅延処理などのほかのプラ...
2023.04.23
とりあえずのメモニッチな話題プログラミングホームページ運用
[CSS] 印刷用のラベルボックスの枠線の色を渋めにした とりあえずのメモ

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした

ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。灰青緑黄赤鮮やか9494952BAAE23DB471FED900E60033薄い色F7F9F9F3FBFFEAF9F4FFF7CBFEF2F2濃い色CCDADAA3C6DAADD8CACDCC9AD8B0AC今までは、彩度の大きめの色だったの...
2023.04.03 2023.07.11
とりあえずのメモニッチな話題ホームページ運用
[WordPress] テーマの更新があったので実行した とりあえずのメモ

[WordPress] テーマの更新があったので実行した

WordPressでは、更新情報が画面上や管理メニューの「更新」から確認できます。WordPress本体だけでなく、プラグインやテーマなども随時更新されているので、毎週のように何かしらの更新があります。更新するものを選択したら、「更新」ボタンを押すだけです。自動的に「メンテナンスモード」に以降し、完了すると戻ります。ちなみに、ごくまれに更新に失敗することがあります。私は一回経験しています。その場合、メンテナンスモードのままなので、サイトにアクセスなくなります。事前にバックアッ...
2023.03.28
とりあえずのメモホームページ運用
[Cocoon] ブログカードをラベルボックスのように表示するCSS プログラミング

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。こちらがスタイルシートです。不要な項目を非表示（display: none;）に...
2023.03.25 2023.03.26
プログラミングホームページ運用
[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのカスタムプラグインを作った【ChatGPTと】 とりあえずのメモ

[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのカスタムプラグインを作った【ChatGPTと】

一ヶ月分のブログ公開がどれぐらいのページビューにつながっているのか、集計する自分用のWordPressプラグインを作成しました。自分にとっては未経験の分野でしたが、対話型AI「ChatGPT」に相談してみると、使える叩き台を用意してくれました。WordPressプラグインづくりははじめてでしたが、かなりの時間短縮。無事に完成しました。アクセス集計プラグイン一ヶ月分のブログ公開が、どれぐらいの成果になっているのか知りたいことがあります。これまでは、Google Analytic...
2023.03.18 2024.05.10
とりあえずのメモプログラミングホームページ運用
[CSS] ブログの記事一覧をInstagramっぽくしたい（いったん断念） とりあえずのメモ

[CSS] ブログの記事一覧をInstagramっぽくしたい（いったん断念）

ひとこと日記のアイキャッチ画像を、Instagramのように大きく表示できるようにしたいと思いました。カスタムHTMLウィジェットでスタイル設定カスタムHTMLのウィジェットで、styleを追加すると、特定のページにスタイルを追加できました。<style>.entry-card-snippet { display: none;}figure.entry-card-thumb { padding-bottom: 0em;} .entry-card-thumb { width: ...
2023.03.05 2023.03.25
とりあえずのメモプログラミングホームページ運用
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】 とりあえずのメモ

[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】

最近は、表のデザインで、縦の枠線を付けないことが多いようです。Spotifyの「支払いに問題がある」？【クレジットカード情報の更新】より確かに、スッキリした印象になります。ブログ内の表を CSS を変更してみました。「border-width: 2px 0px;」という箇所が肝。横線（border-top, border-bottom）は 2px縦線（border-left, border-right）は 0px に指定されます。/** 表の枠の色（縦線なし） 2023-03...
2023.03.02
とりあえずのメモプログラミングホームページ運用
[Cocoon] 表のデフォルトの枠線が黒になっている（style.min.css） とりあえずのメモ

[Cocoon] 表のデフォルトの枠線が黒になっている（style.min.css）

公開したブログ内の表の枠の色が、なぜか黒に変わっていました。原因は、「style.min.css」。この中に表（table）の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。サイトの表の枠の色がおかしい？表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。どうも、デフォルトの色に戻ってしまっているようです。Cocoonの表の枠の色Cocoonでは、テーマで選んだ色（サイトキーカラー）がスタイルでまと...
2023.02.19 2023.03.25
とりあえずのメモプログラミングホームページ運用
[Cocoon] ラベルボックスの枠の色を修正した（gutenberg.php） とりあえずのメモ

[Cocoon] ラベルボックスの枠の色を修正した（gutenberg.php）

Cocoon バージョン: 2.5.7.4 に更新したところ、ラベルボックスの枠の色がおかしくなってしまいました。ラベルボックスの枠を「白」に設定していた箇所が、「黒」に表示されています。追記Cocoon バージョン: 2.5.7.5 で修正されました。（参考）更新後にラベルボックスの枠の色がおかしい？ | 不具合報告 | Cocoon フォーラムラベルボックスの枠とクラスを検証Chromeでスタイルを検証すると、「.has-white-border-color」なのに「va...
2023.02.19 2023.02.21
とりあえずのメモホームページ運用
[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php） とりあえずのメモ

[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php）

ブログの中でもっともよくクリックされるのは、「目次」だそうです。各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。参考サイトを元に、自分のブログに合うように一部修正しました。確かに、目次からサッと読みたいところを確認できるサイトは、とても便利ですよね。目次に戻るリンクを挿入するコードfunctions.phpに追加します。/** 自動で目次に戻るリンクを挿入 */add_filter('the_content', function($content) ...
2023.01.23 2024.05.12
とりあえずのメモプログラミングホームページ運用
[Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた） とりあえずのメモ

[Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた）

結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。以前の方法の問題点以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキストウィジェットでPHPコードを実行する、という方法でむりやり解決していました。ただし、この方法はウィジェットを確認するたびに、ビジュアル表示になって「コードが評価」されててまうため、作り直しが必要でした。ウィジェットを確認するだけで壊れてしまうのです……その後...
2022.11.06
とりあえずのメモプログラミングホームページ運用
Cocoonで作った注目記事ランキングのショートコードを修正した とりあえずのメモ

Cocoonで作った注目記事ランキングのショートコードを修正した

Cocoonテーマのコードを利用して、自前の「注目記事ランキング」を作っていたのですが、更新によってエラーになってしまいました。改めて、コードを修正して直すことができました。サイトのPHPにエラーがある教室ホームページを見たら、ページにエラーが表示されて、レイアウトが崩れていることに気づきました。（2022年10月17日）。このサイトで重大なエラーが発生しました。WordPressのトラブルシューティングについては、こちらをご覧ください。このエラーは、WordPressサイト...
2022.11.04 2022.11.05
とりあえずのメモニッチな話題プログラミングホームページ運用
[WordPress] カテゴリーが更新されない？ とりあえずのメモ

[WordPress] カテゴリーが更新されない？

WordPressで記事のカテゴリーを増やしたら、投稿パネルの「カテゴリー」が更新されない、というケースがありました。カテゴリーを増やした別のPCからログインして、記事を編集しようとすると、記事編集画面のカテゴリーが以前のままなのです。カテゴリーの追加が反映されていません。設定から「カテゴリー」を表示すると、正しく表示されるのですが……どうもブラウザ（Chrome）にキャッシュが残っているようです。記事編集画面を更新しても戻りません。そこで、Chromeの設定から「Cooki...
2022.09.21
とりあえずのメモホームページ運用
[Cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】 とりあえずのメモ

[Cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】

スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。CSSで少し微調整していきます。リンクボタンを一列にまとめるまずは、縦に並んで画面を占有しているボタンを、一列にまとめます。flex-wrapをnowrapにして、一列にしwidthをautoにして、左揃えにしました。/** amazonリンクのモバイル表示を整理 */@media screen and (max-width: 834px) { .bookli...
2022.06.21 2024.09.05
とりあえずのメモインターネット小話プログラミングホームページ運用
次のページ