ページが見つかりませんでした – 雨女によるメモしておぼえるデザインブログ。WordPress、jQueryについての記事を多く書きます( ˘ω˘ )クソネミ. https://webimemo.com 雨女によるメモしておぼえるデザインブログ。WordPress、jQueryについての記事を多く書きます( ˘ω˘ )クソネミ. Tue, 30 May 2023 06:03:32 +0000 ja hourly 1 https://wordpress.org/?v=5.8.9 23159893 簡単&おしゃれ!LINE公式アカウントで魅力的なリッチメニューを設定する方法 https://webimemo.com/iphone/9593 https://webimemo.com/iphone/9593#respond Tue, 30 May 2023 06:01:27 +0000 https://webimemo.com/?p=9593

こんにちは!みぞれ(@xxmiz0rexx)です。
最近LINE公式アカウントを設定する機会があったので、リッチメニューの設定方法を備忘録がてらご紹介していきます。

LINE公式アカウントとは

LINE公式アカウントとは、お客様(友だち)とLINEのやり取りができる仕組みで、予約を取ったり質問に答えたり、ビジネスやブランドのプロモーションにも活用できる便利なサービスです。しかも無料から始められるので起業したての方もすぐに導入できるのが魅力的。

今や企業や個人店、公共機関などさまざまな組織が公式アカウントを運営しており、ユーザーとのダイレクトなやりとりや情報発信をしています。この記事を読んでいる方も、何かしらの公式アカウントを友だち登録しているのではないでしょうか。

リッチメニューとは

リッチメニューとは、LINE公式アカウントとのトーク画面下部に表示されることがあるメニューバーのことです。リッチメニューには、テキストや画像、ボタンなどさまざまな要素を組み合わせて設定することができ、外部サイトへのリンクやクーポンの配布、ポイントカード機能など、さまざまな機能を設定することができます。

公式アカウントを運営するならば、ブランディングや便利さなどの観点からも設定しておいた方がいいものの一つだと思います。

リッチメニュー使用の具体例

例えば実店舗がある場合は「アクセス」というメニューボタンを押すとお店までの地図が出たり、ホームページをお持ちの場合は「ホームページ」というメニューボタンを置いてURLを送れたり、予約サイトがある場合は「ご予約」というメニューボタンで予約サイトに飛ばせたり、工夫次第でとっても便利で集客にもつながるツールです。

リッチメニュー設定方法(スマホ編)

まずは設定の流れから。以下の流れで設定していきます。

  1. リッチメニューに使う画像を用意する
  2. LINE公式アカウントアプリを開く
  3. 「リッチメニュー」をタップ
  4. 「作成」ボタンをタップ
  5. リッチメニューのテンプレートを選択
  6. テンプレートのサイズに合った画像をアップロード
  7. リッチメニューのボタンにリンクを設定
  8. 「保存」ボタンをタップしたら完了!

LINE公式アカウントアプリを開いて、リッチメニューをタップ

アプリを開くとメニューが並んでいるので、「リッチメニュー」というアイコンをタップして設定画面にいきましょう。

テンプレートを選択

テンプレートは大小あります。設定したいメニュー数に応じて適切なテンプレートを選択します。

画像をアップロード

テンプレートに対応した画像をアップロードしましょう。

リッチメニュー用の画像は自作や無料配布されているものでも設定可能ですが、プロのデザイナーに依頼して魅力的なデザイン画像を手に入れ、効果的なリッチメニューを作成する方がブランドイメージの底上げにもなり、集客やファンの獲得に繋がりやすいかと思います。

リンクタイプを選択

リッチメニューを押した時に何をしたいか、以下の中から選択ができます。

  • リンク
  • クーポン
  • テキスト
  • ショップカード
  • 設定しない

以下に設定例をいくつか載せておくので参考にしてみてください。

Instagramボタンを作りたい時

タイプ:リンク、URL:インスタのプロフィールURL

クーポンボタンを作りたい時

まずはアプリのホームタブのメニューでクーポンを作成する必要があります。

タイプ:クーポン、選択:表示したいクーポン

予約ボタンを作りたい時

タイプ:リンク、URL:予約サイトのURL

電話ボタンを作りたい時

タイプ:リンク、URL:tel:0000000000(電話番号)

アクセス(マップ)ボタンを作りたい時

Googleマップで住所を入力し、共有ボタンからURLをコピーしておく必要があります。

タイプ:リンク、URL:コピーしたURL

リッチメニューに使えるハイクオリティなテンプレートの紹介

「じゃあハイクオリティなリッチメニューはどうやって探したらいいの?」というあなたに朗報なのですが、実はこの度、ハンドメイドマーケットのminneで私がデザインしたリッチメニューの販売を始めました!

美しいフォントと色合い、余白もアイコンの大きさも完璧です(自画自賛)

選べるカラーは全部で4種類8色。見本のように同色のライトカラーとの組み合わせがオシャレでオススメですよ。リッチメニュー画像難民の方はぜひ使ってみてくださいね(*´∨`*)

以上、みぞれでした!!

]]>
https://webimemo.com/iphone/9593/feed 0 9593
[WordPress]Twitter API v2を使って記事公開時に自動でツイートする方法 https://webimemo.com/wordpress/9551 https://webimemo.com/wordpress/9551#respond Mon, 01 May 2023 10:25:08 +0000 https://webimemo.com/?p=9551

こんにちは!みぞれ(@xxmiz0rexx)です。
JetPackがTwitter連携を打ち切るそうなので本格的に困る人が増えると思い、私が先日クライアントに行ったTwitter APIを利用して記事を自動ツイートする方法をご紹介します。

Twitter APIがv2になったことで紆余曲折ありましたが何とか実装することができました。ただし画像のアップロードに関してはv2ではまだcoming soonとなっている状況なので、本記事は記事タイトル+Twitter Cardでツイートする方法になります。

手順

以下の手順で行います。

  1. Twitter APIキーを取得
  2. TwitterOAuthのインストール
  3. functions.phpにコードを書く
  4. 記事を公開して確認

1.Twitter APIキーを取得

Twitterにログインした後、Twitter Developer Platform にアクセスし、APIフリープランの利用登録を行い、後述する”必要なもの”をGetします。登録方法は以下のブログなどを参照してください。

参考:https://zenn.dev/rescuenow/articles/e8e896fd722d2d

ちなみに、初めて登録する場合、理由を聞かれるので英語で長文で答える必要があります。私はざっくり日本語で書いた後、親友のChatGPT君に「250文字くらいの英文にして」と頼んで作ってもらいました。便利〜。

必要なもの

以下の四つのキーを取得してください。

  • CONSUMER KEY
  • CONSUMER SECRET
  • ACCESS TOKEN
  • ACCESS TOKEN SECRET

セキュリティの関係でこのダッシュボードでは一度しか見せてくれないそうなので、上記の情報を取得後は普段使っているメモアプリなどに貼っておいてください。

2.TwitterOAuthのインストール

TwitterOAuthは”Composer”を使ってインストールします。なので、まずはHomebrewを使ってComposerをインストールしてからやります。

ターミナル
$ brew install composer

ComposerにPATHを通します。ディレクトリがないとエラーになるのでなかったら作りましょう!すでにディレクトリがある場合は以下の1行目は不要です。

ターミナル
$ sudo mkdir /usr/local/bin
$ sudo mv composer.phar /usr/local/bin/composer

以下のコマンドを打ち込んで反応があればComposerのインストール完了です。これでようやくTwitterOAuthのインストールに進めます。

ターミナル
$ composer -v

TwitterOAuthのインストールは先ほどインストールしたComposerを使って行います。プロジェクトディレクトリで以下のコマンドを実行してみてください。

ターミナル
composer require abraham/twitteroauth

プロジェクトディレクトリに上図のようなファイルがそろえば準備完了です!

3.functions.phpにコードを書く

お使いのテーマのfunction.phpに以下のコードを貼り付けましょう。
★がついている箇所は、あなたの情報に書き換えてください。

functions.php
//公開した記事を自動ツイート
function post_to_twitter($post_id)
{

  global $post;
  if ($post == null) {
    $url = get_permalink($post_id);
    $excerpt = get_the_excerpt($post_id);
    $title = get_the_title($post_id);
  } else {
    $url = get_permalink($post->ID);
    $excerpt = get_the_excerpt($post->ID);
    $title = get_the_title($post->ID);
  }

  if (isset($excerpt) && !empty($excerpt)) {
    $tweet = $excerpt . "\n";
  } else {
    $tweet = $title . "\n";
  }
  $tweet .= $url;

  //メールを送ってツイート内容を確認する場合はこの3行も書く
  $to = "★送りたいメールアドレス";
  $subject = '★新しい記事が公開されました:' . $title;
  wp_mail($to, $subject, $tweet);


  // Twitter APIキー
  $CONSUMER_KEY = '★コンシューマーキー';
  $CONSUMER_SECRET = '★コンシューマーシークレット';
  $access_token = '★アクセストークン';
  $access_token_secret = '★アクセストークンシークレット';

  require_once 'vendor/autoload.php';
  $connection = new \Abraham\TwitterOAuth\TwitterOAuth(
    $CONSUMER_KEY,
    $CONSUMER_SECRET,
    $access_token,
    $access_token_secret
  );
  $connection->setAPIVersion('2');


  $parameters = ['text' => $tweet];

  $connection->post('tweets', $parameters, true);
}

add_action('draft_to_publish', 'post_to_twitter');
add_action('auto-draft_to_publish', 'post_to_twitter');
add_action('future_to_publish', 'post_to_twitter');

いきなり本垢でツイートするのが不安な場合は、$connection->post(‘tweets’, $parameters, true);という行をコメントアウトし、自分のメールアドレスにツイート内容と同じことをメールして内容をチェックすることでドキドキを減らせるのでおすすめですw

function.phpを書き換える際、ミスをするとサイトが表示できなくなる恐れがあります。バックアップは必ず取るようにしましょう!触るのも恐ろしいという方は、ご依頼いただければ私の方で全作業代行します。

4.記事を公開して確認

実装後、すぐに確認をしていきたいので何かしら公開予定の記事をストックしておくと良いかもしれません。公開後ちゃんと自動ツイートされていれば完成です!

ハマったところ

余談ではありますが、今回ハマりにハマった箇所がありまして。それがWordPressのアクションフック部分なんですけども。。

当初publish_postnew_to_publishというアクションフックを使用していたのですが、これがとんだ地雷フックで…名前的に記事が「公開」になったら発動するのかと思いきや、過去記事や下書きの「更新」でも発動してしまい酷い目にあいました。

現在のコードでは記事のステータスの変更で発動するアクションフックにしてあるので順調にツイートできております。

後もう一つ、予約投稿の場合は$postが空っぽなのかタイトルなどを取得できないことがあったので、$postが空っぽの時の処理も足しました。やれやれだわ。

まとめ

というわけで、「[WordPress]Twitter API v2を使って記事公開時に自動でツイートする方法」でした。書き出してみるとだいぶ面倒な作業ですねw

ターミナル使う作業などが苦手な方は代行しますのでご連絡くださーい!
以上、みぞれでした!

]]>
https://webimemo.com/wordpress/9551/feed 0 9551
表示中のカテゴリーに属する記事IDを配列で取得できる『get_objects_in_term』はステータスが公開以外の記事も取得してしまうよ https://webimemo.com/wordpress/9516 https://webimemo.com/wordpress/9516#respond Tue, 18 Jan 2022 05:39:01 +0000 https://webimemo.com/?p=9516

こんにちは!みぞれ(@xxmiz0rexx)です。
すごいニッチかもしれないんだけど、WordPressでカテゴリ一覧を表示している時に、さらに記事を絞り込むためにタグ一覧を表示することってありますよね?

そんな時はWordPress Codexにも載っている以下の方法を参考にする人が多いと思うんですが、実はこれだと下書きなどに設定しているタグも出力されてしまいます。

PHP
<?php
if ( is_category() ) {
    // 現在のカテゴリーのIDを取得
    $cat_id = get_query_var( 'cat' );
    // 表示中のカテゴリーに属する投稿のIDを配列で取得
    $current_posts = get_objects_in_term( $cat_id, 'category' );
    // 表示中のカテゴリーに属する投稿に付けられたタグの情報をまとめて取得
    $current_tags = wp_get_object_terms( $current_posts, 'post_tag' );
    if ( $current_tags ) {
        echo 'このカテゴリーの投稿に付いているタグの一覧:<ul>' . "\n";
        foreach ( $current_tags as $tag )
            echo '<li>' . $tag->name . '</li>' . "\n";
        echo '</ul>';
    }
}
?>

それだとちょっと困ってしまったので対処法を考えました。

問題点

先ほどのCodexにあったコードだと、下書きなどの記事も対象に含まれてしまい、公開中の記事には設定していないタグも一覧として出力されてしまうのです。こんな感じ。

どうしてそんな挙動なのか謎すぎる上に、せめて公開中の記事だけを絞り込めるパラメーターなどがあれば良いんですが、それもないので個人的には大問題でした。うっかりリンク踏むとWordPressが「重大なエラー」とか言ってくるし。。

ゴール

表示中のカテゴリに属する”公開中”の記事IDを取得し、その記事たちに設定されているタグの一覧を出力する

ついでに取得したタグは[ドメイン+カテゴリ名?tag=XXXX]という形式のリンクにします。というわけで以下のような書き方にしてみました。

PHP
<?php
if (is_category()) {

  // 現在のカテゴリーのIDを取得
  $cat_id = get_query_var('cat');
  if (!$cat_id) {
    $cat_now = get_the_category();
    $cat_now = $cat_now[0];
    $cat_id  = $cat_now->cat_ID;
  }

  // 表示中のカテゴリーに属する投稿のIDを配列で取得
  $current_posts = get_objects_in_term($cat_id, 'category');
  //配列に入れた記事IDの中から公開中のものだけを新たな配列に格納
  foreach ($current_posts as $post) {
    if (get_post_status($post) == 'publish') {
      $publish_posts[] = $post;
    }
  }
}
//公開中の投稿に付けられたタグの情報をまとめて取得
$current_tags = wp_get_object_terms($publish_posts, 'post_tag', array('exclude' => '12', 'orderby' => 'count', 'order' => 'DESC'));

if (is_category() and $current_tags) {
  echo '<ul class="tagList">' . "\n";
  $tag_count = 0;
  foreach ($current_tags as $tag) {
    if ($tag_count < 10) {
      echo '<li><a href="/' . get_category($cat)->slug . '?tag=' . $tag->slug . '">' . $tag->name . '</a></li>' . "\n";
      $tag_count++;
    }
  }
  echo '</ul>';
}
?>

取得した$current_postsをforeachで回して、ステータスが「公開中」のものだけを$publish_postsという変数の中に再格納してwp_get_object_termsに渡しています。

無事、公開中の記事から取得されたタグだけになりました。

さいごに

というわけで、『表示中のカテゴリーに属する記事IDを配列で取得できる『get_objects_in_term』はステータスが公開以外の記事も取得してしまうよ』でした!走り書きになってしまったけど、誰か同じように困ってる人に届いてくれると嬉しいです。

以上、みぞれ(@xxmiz0rexx)でした!!

]]>
https://webimemo.com/wordpress/9516/feed 0 9516
Contact Form 7の「スパムログ: reCAPTCHA の応答トークンが空です。」の対処法 https://webimemo.com/wordpress/9509 https://webimemo.com/wordpress/9509#respond Thu, 21 Jan 2021 07:56:59 +0000 https://webimemo.com/?p=9509

こんにちは、みぞれ(@xxmiz0rexx)です。

ある日、古いバージョンのままになっていたContact Form 7のバージョンをあげたら、スパムじゃないのに「メッセージの送信に失敗しました。後でまたお試しください。」というオレンジ枠のエラーメッセージが表示され一切のメールが送れなくなりました。

一応解決したので記事に残します。どこをググってもヒットしなかったので誰かの役に立つと良いな。。

プラグインのバージョンを下げるのはナシ

よく検索でヒットする解決法の中に「Contact Form 7のバージョンを5.1に下げましょう」というのがあるんですが、それだとスパム被害に遭ってる場合に意味がないのですよ。。

Contact Form 7は改良が加えられてバージョンが上がっている訳なので、死ぬほど急いでいる訳ではない限り根本を解決しておきたいところですよね。

「スパムログ: reCAPTCHA の応答トークンが空です。」について公式の見解

このメッセージはFlamingoという受信箱プラグインでスパムログを見たときに表示されるものなのですが、それが何故表示されるのかという質問に対し、公式はこう回答しています。

空の reCAPTCHA トークンはいくつか異なった理由により発生します。よくある理由の一つは reCAPTCHA のスクリプトファイルがロードされていないか、あるいは誤動作しているというものです。これはほとんどの場合作りがいいかげんなテーマが原因です。

Contact Form 7公式サイト

作りがいいかげんやと😂😂😂😂😂😂
こちとら丁寧に作り上げた完全自作テーマじゃ!!!!!!(怒)

さらに、リリースのお知らせを見るとこんな記述もありました。

もし 5.1.1 へのアップグレード後にそのような状況に陥ったなら、使用しているテーマが適切に JavaScript を各ページのフッター部分にロードしているかどうかを確認しましょう。

wp_footer() の呼び出しを不適切に削除してスクリプトのロードを阻害するテーマの存在が知られています。これはテーマ開発における最悪の慣行の一つであり、上に説明したような問題を確実に引き起こします。あなたのテーマでこのような問題が見られる場合はテーマ作者に修正を求めてください。

Contact Form 7公式サイト

いやちゃんとwp_footer()も記述してるし!!!!
じゃあ何でなの?!?!?!

「スパムログ: reCAPTCHA の応答トークンが空です。」になってしまった原因

という訳で今回の事件の真相ですが、私の場合はサイトスピードを上げようと思って行った以下のfunctions.phpへの記述が問題になっていました。

functions.php
//scriptを非同期
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

コメントアウトする事で、無事メールが送れるようになりました。まさかこれが原因だったなんて…。いいかげんどころか、サイトを改善したくてやったことだったのですが、Googleのいうことを聞き過ぎましたかね。。

これでも直らない場合

私のようにこういった記述をしていないのに、もしくはコメントアウトしたのにメールが送れない場合は、こちらのブログに他の解決法が載っているので参考になるかもしれません。

【reCaptcha V3】Contact form 7 5.1.1でメール送信不可【全てスパム判定】

最後に

という訳で、『Contact Form 7の「スパムログ: reCAPTCHA の応答トークンが空です。」の対処法』でした。

世界のどこかの誰かの役に立てたら幸いですw

]]>
https://webimemo.com/wordpress/9509/feed 0 9509
JetPackのFacebook連携が投稿内容全文表示でツラい気持ちになった人を助けるプラグイン https://webimemo.com/wordpress/9463 https://webimemo.com/wordpress/9463#respond Thu, 10 Sep 2020 04:47:26 +0000 https://webimemo.com/?p=9463

こんにちは!みぞれ(@xxmiz0rexx)です。JetPackのSNS連携って便利なんですけどかゆいところに全然手が届かないところがツラいですよね。。

そんな気持ちになってしまった人のためのプラグイン(?)を発見しましたのでご紹介します。

Facebook自動投稿不具合修正プラグイン

プロクラスの中山さんという方がプラグイン化してくれたものです。ダウンロードは以下からどうぞ。ダウンロードというか、コピペしてPHPファイルとして保存してアップロードという流れです。

参考:Jetpackを使ってFacebookに自動投稿すると記事の文章全文が表示される事件を解決したお話【WordPress】

ちなみにわたしは諸事情で『抜粋』を自動挿入するように魔改造しました。
抜粋文は$post->post_excerptで取得できます。

33行目付近を以下のように変更しました。

PHP
$publicize_custom_message = sprintf( '【ウェビメモ更新】%s'."\n".'『%s』 %s', $post->post_excerpt,$post->post_title, wp_get_shortlink( $post->ID ) );

これちょっとばかし苦労したので追記しますが、上記サイトのプラグインをコピペしてそのまま使うと、改行コードの『\n』が動作しないんですよ。『\n』ってシングルクォーテーションの中だと動かないんだって。知ってました?私はじめて知りましたw

参考:PHPの出力で文字を改行(\n)させるには’’(シングルコーテーション)じゃなくて””(ダブルコーテーション)で記述する

あとsprintfも正直使ったことがあんまりなかったので戸惑いました。同じような方は以下のサイトを見て仕様確認してみるのがオススメです。

参考:フォーマットを作る!PHPのsprintf関数の使い方【初心者向け】

この投稿がこんなに短い理由

なぜってこのプラグインを実装したので試すために書いたからですw試行錯誤しましたがうまくいきました!

]]>
https://webimemo.com/wordpress/9463/feed 0 9463
[WordPress]管理者権限なのに『もっと高いレベルの権限が必要です』と言われてカテゴリorタグが編集できない件 https://webimemo.com/wordpress/9410 https://webimemo.com/wordpress/9410#comments Mon, 20 Jul 2020 06:52:55 +0000 https://webimemo.com/?p=9410 [WordPress]管理者権限なのに『もっと高いレベルの権限が必要です』と言われてカテゴリorタグが編集できない件

こんにちは、みぞれ(@xxmiz0rexx)です。前回に引き続き他社ブログからWordPressへの移転のお仕事をしていますが、また問題にぶち当たったので日本語記事も皆無だったし同じことで困るかもしれない未来の誰かのために残します。




突然の問題発生

それは他社ブログからの記事をインポートし、カテゴリの整理をしていた時のことでした。

WordPress「もっと高いレベルの権限が必要です。」

WordPress「もっと高いレベルの権限が必要です。」
管理者権限の私「えっ」

自分が最高権限者だと思っていたけど、さらに上がいる…だと…??と謎がいっぱいだったので、愚痴Tweetをしたところ、フォロワーさんから参考になりそうな記事を2つ教えていただきました。

英語の参考記事

追記(2020/7/28)

『公開に失敗しました。入力されたタームを割り当てる権限がありません。』というエラー文もこの問題のせいでした。

この問題の原因

おそらくですが、移転のためにデータをインポートした際、他社ブログではカテゴリとタグが同slugでも問題なかったのに、WordPressだと想定外のエラーになってしまうため、ワケのわからないエラー文を吐くのではないかって感じです。

ほんとはたぶん『同じslugがタグにもあるから編集できないよ!』って事を言いたいんだと思います。人間にもあるよね、こういうこと(何)

解決の手順

前述した英語記事にあった解決法で無事解決しましたので日本語で残しておきます。データベース触るので自己責任&バックアップは必ずとってからやってくださいね。

一応宣言しておくと、私は不要なカテゴリをタグに変換し、該当記事すべてにそのタグをつけてから、いらなくなったカテゴリを消すためにこの操作をしましたので、そういった視点の書き方になってしまってると思います。逆の方はもうひと手間(記事の一括カテゴリ付けとか)いるかも。

  1. phpMyAdminで『wp_terms』テーブルに移動
  2. 同じ名前&異なるslugで新規追加
  3. ダッシュボードで編集不可なカテゴリのIDを確認
  4. 元のterm_idを新しいterm_idに書き換える
  5. おわり

1.phpMyAdminで『wp_terms』テーブルに移動

まずはデータベースにアクセスします。
するとサイドバーにテーブル一覧があるので『wp_terms』のテーブルに移動しましょう。

2.同じ名前&異なるslugで新規追加

メインカラムの上部に『挿入』タブがあるので移動し、権限がうんぬんで操作できなかったカテゴリと同じ名前&異なるslugで新規追加してみましょう。

ここではサンプルとして記事広告という名前でadというslugを追加してみます。

実行すると画面が切り替わり、IDが割り振られたことが分かります。

このIDを覚えておいてください。この見本の場合は266でした。

3.ダッシュボードで編集不可なカテゴリのIDを確認

カテゴリ一覧ページに行ってマウスカーソルを合わせるとブラウザ下部にURLが出るのですが、その中に書いてあるIDを覚えておきましょう。この見本の場合は102って書いてあります。

4.『wp_term_taxonomy』テーブルで元のterm_idを新しいterm_idに書き換える

さて、準備が整いました。
この見本の場合でいうと、新しいIDが266で古いIDが102です。

サイドバーから『wp_term_taxonomy』テーブルに移動し、term_idが古いIDの行(この見本の場合は102)を探し、『編集』をクリックします。

term_idを新しいID(この見本の場合は266)に書き換え、実行します。

5.おわり

ダッシュボードのタグ一覧ページを見に行ってみると記事広告という名前のタグがadというslugに書き換わっています。カテゴリの方は元のままのslugになってますので、これで分離してくれました😭✨タグに紐付いていた記事もちゃんとそのまま!

あとは不要になったカテゴリを消すだけ!(記事の移動を行う場合は行ってから)

さいごに

というわけで、ややこしい上にかなりリスキーな作業をしないと思い描いた結果を手に入れることができませんでした。疲れた。。。

最後に注意点ですが、知識のない方がデータベースを触るのは非常に危険なことなので、不安だなと思ったらプロに頼みましょうね。…たとえば私とかσ(゚∀゚)笑
以上、みぞれでした!

]]>
https://webimemo.com/wordpress/9410/feed 1 9410
[WordPress]指定した範囲の投稿IDの場合に投稿画面でビジュアルエディタを使わない https://webimemo.com/wordpress/9398 https://webimemo.com/wordpress/9398#respond Tue, 14 Jul 2020 07:36:09 +0000 https://webimemo.com/?p=9398

こんにちは!みぞれ(@xxmiz0rexx)です。
小1時間ハマったのでメモ…。ニッチすぎて誰も使わないかもしれないけど、誰かのために置いておきますwちなみに私はライブドアブログ→WordPressへの移転のお仕事で必要になりました。




このカスタマイズが必要になった時

前述の通り、ブログの移転のお仕事で必要になりました。

他社ブログサービスでエクスポートしてきた過去記事はクラシックエディタに入るんだけど、
それをビジュアルエディタで開かれちゃうといらないタグが自動挿入されてしまいとんでもない表示崩れになりました。

新しい記事はブロックエディタを使うことになっていたので単純にビジュアルエディタをOFFにするわけにも行かず、泣きながら実装したのでした。
というわけで本題⬇

指定した範囲の投稿IDの場合に投稿画面でビジュアルエディタを使わない

functions.php内
//ビジュアルエディタを使わない
function disableRichedit(){
    global $typenow;
    $post_id = $_GET['post'];
    if( $typenow == 'post' ){//pageに変えれば固定ページのみ
        if ( 2 < $post_id && $post_id <= 2512) {
            add_filter('user_can_richedit', 'disableRichedit_filter');
        }
    }
}
function disableRichedit_filter(){
    return false;
}
add_action('load-post.php', 'disableRichedit');
add_action('load-post-new.php', 'disableRichedit');

ピンク文字の部分をお好きに変更して使ってください。
範囲指定している理由は、指定しないと新規記事作成のときにも効いちゃうから(やばい)。

さいごに

ほかに良い方法あるよ!って方はメールかTwitterにご連絡ください。
以上、みぞれでした!

]]>
https://webimemo.com/wordpress/9398/feed 0 9398
WordPressでトップ以外の下層ディレクトリがhttpsにリダイレクトしない場合の解決法 https://webimemo.com/wordpress/9358 https://webimemo.com/wordpress/9358#respond Tue, 07 May 2019 07:53:05 +0000 http://webimemo.com/?p=9358

こんにちは!みぞれ(@xxmiz0rexx)です。このたびWordPressを利用している場合の.htaccessの書き方でつまづきましたので解決法をメモしておきますφ(・ω・ )メモメモ




サイトをSSL化したら、.htaccessでリダイレクトしよう!

SSL化したてだと、他サイトや検索サイトからのリンクが『http:〜』になっていることが多いと思います。そんなときは.htaccessに以下の記述をすると『https://〜』の正しいURLにリダイレクトしてくれるので便利です。

.htaccess
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

ただし、WordPressを使っている場合は要注意

随分前に、友達と運営しているフリー写真素材サイトの『GIRLY DROP』をSSL化しまして、しばらく気づかなかったんですが、トップ以外の下層ディレクトリのリダイレクトがうまくいっていませんでした😇

解決法

そんなときは前述したリダイレクトの記述を# BEGIN WordPressという記述よりも前に移動させてみてください。フォロワーさんが教えてくれたんですが、どうやらWordPressが.htaccessに書き込むRewriteRule ^index\.php$ – [L]という記述が邪魔をして、httpsへのリダイレクトが無効化されてしまうみたいです。

さいごに

というわけで、WordPressでトップ以外の下層ディレクトリがhttpsにリダイレクトしない場合の解決法でした。わりと陥りがちというか、盲点なところだと思うのでどなたかの参考になれば幸いです。
以上、みぞれでした!

]]>
https://webimemo.com/wordpress/9358/feed 0 9358
jQueryいらず!スクロールについてくるCSS『position:sticky;』の使い方と、ついてこない時の対処法 https://webimemo.com/web/9173 https://webimemo.com/web/9173#respond Mon, 16 Oct 2017 23:34:02 +0000 http://webimemo.com/?p=9173

ブラウザがどんどん新しくなっていく昨今。以前はjQueryを使っていたような事も、CSSだけで対応可能になってきましたね!

最近わたしが使うようになったCSSで、position:sticky;という便利なものがあるので、まだ知らない人にご紹介したいと思います。




『position:sticky;』で何ができるの?

普段jQueryなどで実装している、『特定の位置まで画面をスクロールしたらそれ以降ずっと追従してくれるコンテンツ』をCSSだけで気軽に作ることが可能です。

『position:sticky;』の使い方

スクロールに追従させたい要素に対して、以下の指定をすればOKです。

HTML
<div class="sticky">
  <!-- 追従させたい内容 -->
</div>
CSS
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 15px;
}

top: 15px;はお好みで。位置(top, bottom, right, left)のどれかを指定すればOKです。
positionですので、親要素にposition:relativeすることをお忘れなく!!

DEMO – デモ

デモページはこのサイトです。PCで見たとき、サイドバーにくっついてくる要素があると思います。

ブラウザ対応状況

対応状況は上記の通りです。
参考:Can I use…

IEやEdgeなどの未対応ブラウザには『stickyfill』というスクリプトもあるようですが、私は「未対応ブラウザにはついてこなくてOK」という時にしか使わないので使用したことはありません。

精神的にラクなのがposition:sticky;のメリットだと思っているので。

『position:sticky;』したのに、ついてこない時の対処法

まだ不慣れなので、「あれ?!何でついてこないの!!」というときが多いですw
ついてこないときは以下を確認してみてください。

  • 親要素にposition:relative;しているか
  • 祖先や親要素にoverflow:hidden;またはoverflow:auto;していないか
  • 自分自身にtop:15px;など、位置の指定をしているか
  • table要素に使用していないか(FireFoxなどでのバグですが使わない方が無難です)

さいごに

というわけで、『jQueryいらず!スクロールについてくるCSS『position:sticky;』の使い方と、ついてこない時の対処法』でした!

ブラウザ対応状況があんな感じなので、おもに当サイトのようなブログのサイドバーでの使用がオススメです。ヘッダー+グローバルメニューを追従させるのも良いかも。もし良かったら使ってみてくださいね!

以上、みぞれ(@xxmiz0rexx)でした!!

]]>
https://webimemo.com/web/9173/feed 0 9173
数年前Sassに手を出してからそのまま使い続けている人に朗報。2017年、ナウで便利なSass環境はコレだッ!!という本が出たよ。 https://webimemo.com/web/9131 https://webimemo.com/web/9131#respond Wed, 20 Sep 2017 23:45:38 +0000 http://webimemo.com/?p=9131

こんにちは!Sassは大好きだけど黒い画面が嫌いで環境を放置しまくっていたポンコツのみぞれ(@xxmiz0rexx)です。

もうめんどいのでCodeKitにすべてを委ねていたりもしましたが、やっぱりさ…どう考えてもGulpって便利なんだよね…PostCSSってめちゃんこ良さそうなんだよね…という私と私みたいなあなたに朗報すぎる本が出たようです。




ナウで便利なSass環境を教えてくれる本はこちらです

って、あれれ〜?おかしいな〜?コレなんか見たことある見た目の本だよ〜?

と思った名探偵がいるかもしれません。

そうそう。コレって数年前、一世を風靡したSassの教科書なんですよ。これを見ながらSassの環境作った人、たくさんいるのではないでしょうか?

でも少し違うんです。いや、だいぶ違うといっても過言ではないですね。今回ご紹介するのは、これからSassを始める人はモチロン、この本を持っている人にだってかなりオススメできる『Web制作者のためのSassの教科書改訂2版』なのです!!!!

『Web制作者のためのSassの教科書 改訂2版』の内容

さて、気になる内容なのですが。1冊目を持ってる人は特に気になると思いますが、コレ…改訂版とは名ばかりでほぼ丸ごと新しくなっているようなものでしたよw著者のお二人方、ほんとうにお疲れ様です。。

Webの情報って本当に目まぐるしく更新されていってしまいますよね( ˘・з・)
ついこないだ設定したGruntがもはや過去の遺産。。でも最新の環境で仕事をすると、作業のスピードや便利さが格段に違ってくるんですよね!!
ずいぶん前に設定したきりの方は、ぜひこの機会にナウでクールな環境を手に入れちゃいましょう。

目次

個人的にオススメしたいのはやはり5章にある『PostCSS』です!!設定はさっさと終わらせて、早く『PostCSS』を使いましょ〜♡♡♡CSSプロパティの順番をキレイにできたり、画像名を入れるだけでパスやサイズを取得してくれたり本当に便利でグレートですよ〜(人´ω`*)♡

  • 第1章 Sassのキホン
    • 1-1 まずはSassって何なのかを知ろう
    • 1-2 Sassを導入する前の疑問や不安
    • 1-3 何はともあれSassを触ってみよう
  • 第2章 Sassの利用環境を整えよう
    • 2-1 本書で使用する環境について
    • 2-2 Node.jsをインストールする
    • 2-3 黒い画面を使ってみよう
    • 2-4 セットアップ済みの環境をインストールする
    • 2-5 Sass をコンパイルする
    • 2-6 セットアップ済みの環境を作成する方法
    • 2-7 GUIコンパイラ(Prepros)でSassを使う
    • 2-8 DreamweaverでSassを使う
  • 第3章 これだけはマスターしたいSassの基本機能
    • 3-1 ルールのネスト(Nested Rules)
    • 3-2 親セレクタの参照&(アンパサンド)
    • 3-3 プロパティのネスト(Nested Properties)
    • 3-4 Sassで使えるコメント
    • 3-5 変数(Variables)
    • 3-6 演算
    • 3-7 Sassの@import
  • 第4章 高度な機能を覚えてSassを使いこなそう
    • 4-1 スタイルの継承ができるエクステンド(@extend)
    • 4-2 柔軟なスタイルの定義が可能なミックスイン(@mixin)
    • 4-3 ネストしているセレクタをルートに戻せる @at-root
    • 4-4 Sassのデータタイプについて
    • 4-5 制御構文で条件分岐や繰り返し処理を行う
    • 4-6 関数を使ってさまざまな処理を実行する
    • 4-7 自作関数を定義する@function
    • 4-8 テストやデバックで使える@debug、@warn、@error
    • 4-9 使いどころに合わせて補完(インターポレーション)してくれる#{}
    • 4-10 変数の振る舞いをコントロールする !default と !global
  • 第5章 現場で使える実践Sassテクニック
    • 5-1 管理/運用・設計で使えるテクニック
    • 5-2 レイアウト・パーツで使えるテクニック
    • 5-3 スマホ・マルチデバイス、ブラウザで使えるテクニック
    • 5-4 gulpのタスクを追加してもっと便利な環境にする
    • 5-5 PostCSSでSassをさらに便利にする
  • 第6章 もっとSassを便利にするフレームワークやツール
    • 6-1 Sassのフレームワーク紹介
    • 6-2 SassのGUIコンパイラ
  • 第7章 Sass全機能リファレンス
    • 7-1 Sassの基本と高度な機能
    • 7-2 Sassの関数一覧
    • 7-3 Sassの拡張
  • 付録
    • コマンド一覧
    • 用語集

さいごに

というわけで、『数年前Sassに手を出してからそのまま使い続けている人に朗報。2017年、ナウで便利なSass環境はコレだッ!!という本が出たよ。』でした!

この本を参考に設定していけば、簡単に最新の環境にレベルアップできちゃうこと間違いなし!(*´∨`*)
解説も丁寧で私のようなポンコツな方wにもガチでオススメなので、ぜひ参考にしてみてくださいね!サポートサイトも2が出来てたョ。

以上、みぞれでした!

]]>
https://webimemo.com/web/9131/feed 0 9131