ウェブデザイナーの問題解決メモ

 bootstrap5の基本classには、fs-1、fs-2、のように数字のみ指定してフォントサイズを変更する方法があるが、カラムを指定する時のような、col-sm-1、col-md-2、のように画面サイズによってフォントサイズを可変にする指定が無い。 そこで、以下ファイルに１行追加することにより、それが実現する！ scss/_utilities.scss 434行目くらいにある"font-size"のところ。 "font-size": (       rfs: true,       property: font-size,       class: fs,       values: $font-sizes,       responsive: true　←これを追加     ), 日本語サイトだとなかなか実装している人が居なかったので英語検索して見つけ、色々いじった結果、これを追加するだけで行けることが判明した！ 助かる！

 Wordpressのテーマ「Lightning」を使用するにあたり、以下の問題にぶち当たって解決！ 1.コピーライトが消せない 2.１ページものでページ内リンク（アンカー）した時に、グローバルナビゲーションに下線がついてしまう ※但し、これらの解決方法はかなり強引なので、オススメはしない。 まず「１」コピーライトが消せない いろんなサイトを調べてみると、子テーマで簡単に消せるような記述があるけど、どういう訳か子テーマをいじっても消せなかったので、親テーマをいじってやる。 wp-content/themes/lightning/_g3/inc/template-tags.php 251行目あたりの //Powered. から下３行くらいを、/* */ で囲ってコメントアウト！

 タイトルの通り、wordpressのテーマ「twenty-seventeen」を使用したサイトにて、投稿（お知らせ）記事の「この投稿を先頭に固定する」にチェックを入れた所、「お知らせ」ページ内では上部固定されるが、トップページでは固定されない現象がありました。 色々調べた所、以下のソースを変更することで解決しました！ wp-content > themes > twentyseventeen-child(ここは子テーマ) > template-parts > page > content-front-page-panels.php 63行目 'ignore_sticky_posts' => true, を 'ignore_sticky_posts' => false, に変更 先頭固定表示にする記事は「sticky」というclassがつくようになっていて、 つまり「ignore」＝「除外する」　「sticky_posts」＝「固定記事」　「true」＝はい 「固定記事という設定を無視しまーす」 という指定になっていました。 いやいや、日本語サイトもそうですが、海外で記事を漁ってもなかなか出てこず、手こずりました。

modxでページタイトルを表示したい場所に[*pagetitle*]と表示しますが、そのページタイトルをキリの良い所で改行して表示したい、という時は、そのまま改行したい場所に＜br＞を入力します。 しかし、それだと「改行しないでタイトルを表示したい場所」でも、改行されて表示されます（当たり前だけど…） そこで、 ①strip_tags関数を使用する $str = [*pagetitle*]; echo strip_tags( $str, '<br>'); これをスニペットに登録し、表示したい場所に[[スニペット名]]としてみたのだが、どうしてもBRが消えてくれない。 ②正規表現で削除する ③modxのタグを使用する【これが正解！】 pagetitleを出力するリソースを以下にするとbrタグを削除してくれる [*pagetitle:strip_tags:hanzen*]

 modxのtemplateを何種類か作り、フロント画面でボタンを押すことでユーザーがテンプレートデザインを切り替える方法を探していたが結局見つからず、自作したのでメモします。 ■template templateに白ベース、黒ベースのhtmlを作成済み [2]black [3]white ■リソース画面にボタンを配置します。 [[changeTPL]] <!-- チャンクの呼び出し --> <form name="form" action="[~[*id*]~]" method="post"> <input type="submit" class="btn" name="subject" id="subject" value="白" /> <input type="submit" class="btn" name="subject" id="subject" value="黒" /> <input id="thisTPL" name="thisTPL" type="hidden" value="[*template*]" /> </form> ※フォームの内容をPOSTし、結果を同じ画面に返すことで反映させます。 ※hiddenで現在使用中のテンプレート番号も一緒に渡します。 ■チャンク // inputのidがsubjectのvalue値を取得 $post = $_POST['subject'];  //inputのidがthisTPLのvalue値を取得（テンプレート番号） $thisTPL = $_POST['thisTPL'];  //表示中のリソース番号を取得 $id = $modx->documentObject['id'];  //現在のテンプレートを取得し、切り替える if($thisTPL...

 テンプレート変数を作って、mm_rulesでリソース画面に入力エリアを複数作ったのだが、tinymceが使えるのは「本文」のコンテンツのみ。 これではせっかく管理画面を誰でも入力可能な感じにカスタマイズしたのに、「ここはテキストの装飾できないの？」ということになる。 そこで、 「エレメント」→「エレメント管理」→「プラグイン」のtinymceを選択 「設定」タブの「Custom Parameters」のエリアに以下を追記。 mode : "specific_textareas", selector : "textarea" こうすると、管理画面上で「textarea」になっているテンプレート変数の入力画面が全てtinumceで操作可能になる！

 modxをtinymceでエディタ編集している際、改行をすると勝手にpタグが入ったり、プレビューするとbr改行タグが消えたりする。 また、チャンクで作成したテンプレートを挿入した際には、例えばh2タグの中身を編集していて改行キーを押したときにh2タグ内で改行されて、カーソルをタグ外でクリックしても出てくれない事象が発生する。 wordpressやtinymce本体の使い方はサイトに多くのっているが、modxでの変更方法がなかなか載っていなかったのでメモ。 「エレメント」→「エレメント管理」 tinymceのプラグインを選択 「設定」タブの「プラグインの設定」のエリアに以下を記載 forced_root_block : 'div', force_br_newlines : true, force_p_newlines : false （一番下にカンマは付けません） これが何をやっている設定かというと、 ・新しく文章を入力する際のブロックはdivで囲みます。 →これがないと、改行したときにh2タグ外へ出てくれない ・brを消さない ・pタグを追加させない root_blockに''で空を入れるだけだと、 チャンクテンプレートで<br>タグを最後に入れても何故かbrタグが消える。 <br>タグを<br><br>にしておくと何故か消えないが、改行した際に2こめの<br>タグが文末にどんどん増えていく。 という不思議な動きをする。 なので。div自体には特殊なcssを設定せず、とにかく改行ごとにdivで囲ってしまおうという強硬手段。 どうしてもdivタグで囲いたくない場合は、root_blockを''にして、テンプレート側に<br><br>を設定。 そして追加されていく<br>を手動で消していく感じになる。 もっといい解決方法があったら教えて！！！ ■追記■ やはり、root_blockは''にしないとだめだ。 そしてチャンクテンプレートがh2やdivで囲っているデザインの場合は最後に<br><br>を入れる。 先ほどのやり方だと改行キーを押したら今いるdivが複製されるようになっている！？ ...

 とにかく最終的に見つけたのは、modx管理画面の「エレメント」→「エレメント管理」→「プラグイン」→「TinyMCE」→「設定」タブの 「Custom Parameters」のところに以下を入力して保存。 valid_elements : "*[*]" 書いてあるエレメント（タグ）全部有効にしろよ！という強制的なやつです

 お知らせ一覧からお知らせ詳細へリンクをクリックしたら何故かお知らせ一覧が表示される…！ パーマリンク（URL）を年月日＋IDにして、日本語の投稿タイトルを入れてもURLを整形しようとして、 「/%category%/%year%%monthnum%%day%%post_id%/」 と設定してみたところ、リンク先が投稿一覧ページに行ってしまう…！ おかしいと思って調べてみると、どうやら数字のみのURLを設定している場合、何らかの内部処理とかで、自動的に数字を-2しているという記事を見つけた。 なるほどね！ 文字列が入っていれば大丈夫とのことで、 「/%category%/%year%-%monthnum%-%day%-%post_id%/」 というようにハイフンを入れてみたところ、無事リンクが通りました！ 相変わらず奥が深いwordpress…

wordpressのhabakiriテーマで、ニュースを表示する部分を「news.php」として作成していました。 wordpressで固定ページに対象カテゴリーの投稿一覧を表示してカテゴリーにラベルをつける しかし、投稿の設定で「ブログトップに固定」の表示にチェックを入れても固定表示されないバグがありました。 調べてみると、get_postsを使用すると固定表示がされないという問題が発覚。 wp_queryで表示しなければいけないとのこと。 そこで、内容を大幅に書き換えました。 ■news.php <?php $arg = array( 'posts_per_page' => 5, //表示記事件数(-1で全件表示) 'category' => 10, //カテゴリーIDが10の記事にしぼりこみたいとき 'orderby' => 'date', //並び順 'order' => 'DESC' //降順(日付の新しい順) ); $query = new WP_Query($arg); ?> <?php if($query->have_posts()): ?> <?php while($query->have_posts()):$query->the_post();?> <a href="<?php the_permalink(); ?>"> <?php the_time('Y/m/d'); ?> <span class="label label-<?php $label = get_the_category(); $label = $label[0]; { echo $label->categ...

 contactform7でお問い合わせフォームを送信する際、入力必須項目が空だとエラー分が自動的に表示されるが、その表示位置や見栄えの調整をキレイにするためのスタイルシートをメモ。 ■フォーム上部にエラー文が並ぶので削除 /*上部のエラー文を消す*/ .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: 0; padding: 0; border: 0; } ■各フォームの右側にエラー文が表示されるので、フォームの下に表示されるよう調整 　＆赤文字で表示する /*各場所のエラー文位置調整*/ .wpcf7 span.wpcf7-not-valid-tip { display: block; position: static; top: 0; left: 0; border: none; color: red; } ■メールフォーム送信 /*最下部のメッセージ装飾*/ .wpcf7 .wpcf7-response-output { margin: 20px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wpcf7 .wpcf7-validation-errors { color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7; } .wpcf7 .wpcf7-mail-sent-ok { color: #3A87AD; b...

 クッキーの使用云々でGDPRを云々やることになったので、ワードプレスのサイトなのもありせっかくなのでプラグインを漁ってみた。 「Cookie Notice for GDPR & CCPA」というプラグイン。 基本は日本語化されているし、微妙に残っている英語も翻訳すればわかる程度。 設定も簡単でポンポンと完了させたのだが、何故だか！表示が！されない！ そもそも「Local」というWordpressのテスト環境がアプリひとつで構築できるMac用のアプリを使っていたのだが ・ローカル環境だからだめなのか？ 　→そんなはずはない ・オンラインの別のテストサイトでプラグインを設定 　→表示された… そこで、開発者ツール（webインスペクタ）を表示し、キャッシュ許可に関するポップアップが表示されているエリアを検証。 「cookie-notice」というclassなどを多用していたので、表示されていない側のテスト環境のソースで「cookie-notice」を検索。 だが、スタイルシートの読み込みくらいしかヒットしない！ ということは、本来読み込まれるはずの「ヘッダー」or「フッター」の位置に、プラグインの読み込みがされていないということではないか、という所へ至る。 プラグインが読み込まれる位置は「フッター」であれば、＜/body＞のすぐ上だったので、WPのソースを見に行くことに。 wp-content/themes/テーマ名/footer.php そして、「表示されるサイトのfooter.php」「表示されないサイトのfooter.php」の、/bodyタグの上に何があるか……！ ＜？php wp_footer(); ＞ に行き着きました。 ヘッダーの場合はおそらく wp_header　の箇所なのだろう。 今回表示させたかったWPのサイトは、完全カスタマイズされたWPテーマだったため、この記述が必要無かったのかもしれない…。 案の定、footer.php　の/body　直上に　wp_footer　の記述を追加したら、キャッシュ許可のポップアップが表示されました！！ 今後の為にメモ。

「Advanced Custom Fields」プラグインを使って作成したカスタムフィールドのセレクトボックスで選択されている内容を取得します。 <?php 　$field = get_field_object('hp-prefecture'); 　$value = $field['value']; 　$label = $field['choices'][$value]; ?> 表示したい場所で <?php echo $label; ?>

■function.phpに以下を追記 // WP本体更新 add_filter( 'pre_site_transient_update_core', create_function( '$a', "return null;" ) ); // プラグインアップデート add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) );

wordpressで作成されたサイトで、固定ページに情報が掲載されていて、ある日時以降にアクセスしたら、何秒かディレイを置いて別ページにリダイレクトしたい。という要望が出ました。 metaタグを指定するまでアクセス権がなく、FTP接続も難しい…という状況で、いいプラグインが無いか探しました。 有名なリダイレクトプラグインは「Redirection」ですが、これではページを表示しれからのディレイが付けられない。 次に見つけたのが、「Delay Redirect」。投稿や固定ページの下部に設定画面が表示され、以下の内容が設定できます。 「Delay (in Seconds)」＝「ディレイ（秒）」 「Destination Path URL」＝「リダイレクト先のURL」 ただ、これだと「○月○日の○時からリダイレクト開始」という処理ができない… そこで、この数ヶ月で培ったwordpressカスタマイズの能力を集結！！ このプラグインを元にして、日時指定が出来るようにカスタマイズすればいいのでは！？ と思いついたのです。 ※個人ベースでテストはしていますが、このカスタマイズ内容を真似してサイトが壊れたよ！という苦情は受け付けておりませんので自己責任でお願いします。 カスタマイズした箇所は以下になります。 ■delay-redirect.php [38行目]　画面に表示する項目「秒」と「URL」の枠を定義している所に、日時を入れる場所を作ります。 //日時枠の追加 array( 'id' => 'delay-in-daytime', 'label' => 'リダイレクトを開始する日時 例）2020-01-17 17:15　※必ずこの形式で入力してください', 'type' => 'text', ), [145行目あたり]　設定された内容にしたがってリダイレクトメタを表示している場所をいじります。 //指定日時を過ぎているかチェック date_default_timezone_set('Asia/Tokyo'); $daytime = get_post_meta(...

NTTコミュニケーションズの「Bizメール＆ウェブビジネス」サーバーでwordpressをインストールして使用。 投稿表示する際にカテゴリーを絞り込んで表示したいと思い、以下を記載したところphp構文エラーに。 ■category.php if(is_category('news')){ $args = ['category_name' => 'news']; } Parse error: syntax error, unexpected '[' 原因はphpのバージョン。 どうやら、php5.4以降は配列の短縮構文が使えるのだが、それ以前だと使えない模様。 なので、以下のように書き換える。 if(is_category('news')){ $args = array('category_name' => 'news'); } このサーバーのphpバージョンは古いようで、FTP接続も度々切れるしサイト表示も重いし不安定…

なんとなくすぐ忘れるのでメモ。 http://ドメイン/wordpress/　にwordpressをインストールしたとする。 管理画面の「設定」「一般」にある 「WordPressアドレス（URL）」は「http://ドメイン/wordpress」となっている。 「サイトアドレス（URL）」は「http://ドメイン/wordpress」となっている。 この「サイトアドレス」を「http://ドメイン/」に変更して、このアドレスにアクセスしたときにホームページ（トップページ）を表示したのだ。 ①まず、FTPソフトなどで以下から２つのファイルをDLします。 ・index.php ・.htaccess ②DLしたファイルのうち「index.php」を以下のように変更します。 17行目あたりの require( dirname( __FILE__ ) . '/wp-blog-header.php' ); ↓ require( dirname( __FILE__ ) . '/wordpress/wp-blog-header.php' ); インストールディレクトリを見てね、というおまじない ③実際に表示したい場所「http://ドメイン/」に２つのファイルをアップロード ④WP管理画面で「サイトアドレス（URL）」を「http://ドメイン/」にして保存 以上！！ 管理画面へのアクセス自体もドメイン直下にしたい場合は別の方法があるので別途記載します。

プラグインを使わずに、自作のパンくずリストを表示させます。 投稿ではカテゴリーの親、タグの親。固定ページでは固定ページの親も表示させます。 そして見た目はbootstrapのスタイルを使用します。 できれば子テーマの ■function.php /* パンくずリスト */ function mytheme_breadcrumb() { //HOME>と表示 echo '<ol class="breadcrumb">'; echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>'; //投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示 $cats = ''; $cat_id = ''; if ( is_single() ) { $cats = get_the_category(); if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id; } else if ( is_category() ) { $cats = get_queried_object(); $cat_id = $cats->parent; } $cat_list = array(); while ($cat_id != 0){ $cat = get_category( $cat_id ); $cat_link = get_category_link( $cat_id ); array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' ); $cat_id = $cat->parent; } foreach($cat_list as $value){ echo '<li>...

メディアアップローダーで画像をアップロードした先のURLを変更したいと思い調べました。 残念ながら現段階では、「フォルダを複数に分けてメディアアップローダー上からフォルダを選んで」というのは難しそう。 http://ドメイン名/インストールフォルダ名/wp-admin/options.php という形式でアクセスすると、裏管理画面みたいなものが表示されます。 下の方に（アルファベット順に並んでいる）↓の2つの項目が並んでいるので 「upload_path」 「upload_url_path」 upload_path　には　「/images」　（「http://ドメイン名/images/」としたい場合） upload_url_path　には　「http://ドメイン名/インストールフォルダ名/images」 そして最下部の「変更を保存」を押して、通常の管理画面に戻れば 管理画面の「設定」→「メディア」のページで 「アップロードするファイルの保存場所」 「ファイルへの完全なURLパス」 という項目が追加され、そこで現在設定しているパスを確認することが出来るようになります。

①カスタムフィールドの中身を独自データベースへ登録する ②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する ・メディアアップローダーを使用して画像のURLを独自DBに登録する ・画像登録は2箇所作りたい ③独自データベースは2個作りたい ④登録したカスタムフィールドの中身を取得してコンテンツ内に表示する ①はこちらの記事で取り上げた中身になります。 ②カスタムフィールド内で画像を登録する際にメディアアップローダーを使用する https://gist.github.com/sushat4692/33df8a65474798fca0c6 こちらの記事の方法を参考に、①の際に作ったカスタムフィールド＆新規DBのソースと混ぜ合わせる必要があります。 「admin-media.js」がメディアアップローダーを使用してくれる動きをしてくれる。 「admin.css」これは今回使いません 「function.php」この中でカスタムフィールドを作成している部分があるが、カスタムフィールドを作成するところは①のプラグインとして作成してしまっているので、ソースの一部を参考する形になります。 １．「function.php」で画像の登録・表示処理をしている部分を、①のプラグイン「custom-meta-field1.php」に追記します。 function.phpにある[36行目]〜[50行目]を、プラグイン側の画像登録を表示したい箇所にコピペします。 プラグイン側のtableのtd内にコピペです。 <td> <div class="custom-media" data-type="image" data-title="画像" data-target="#field-image"> <input type="text" id="field-image" class="my-uploader__url widefat" name="street_img" value="<?php echo $str...