自作ウィジェットの作り方

カスタムのウィジェットを登録する（function.php）

※function.phpはコードを間違えると真っ白になります(経験談)ので、バックアップしておきましょう。 function.php

/**
* カスタムでウィジェットを登録
*/
function custom-sidebar_widgets() {
//”custom-sidebar”は任意
register_sidebar(array(
'id' => 'my-sidebar',//ID
'name' => 'ウィジェットページでの表示テキスト',//日本語でOK
'description' => '説明文',//ウィジェットページで表示されます。日本語でOK
'before_widget' => '<aside id="%1$s" class="widget %2$s">',//ウィジェットの内容が入ります
'after_widget' => '</aside>',
'before_title' => '<h4 class="widget-title">',//ウィジェットのタイトルが入ります
'after_title' => '</h4>',
));
}
add_action( 'widgets_init', 'custom-sidebar' );//”custom-sidebar”の部分は名前を合わせる

サイドバーに表示させる（sidebar.php）

サイドバーにウィジェットを表示させるので、sidebar.phpに以下を追加します。
sidebar.php

<?php if (is_post_type_archive( 'アーカイブ名' ) || is_single( '投稿ページのスラッグ名' )) : ?>
<aside class="widget">
<?php dynamic_sidebar('my-sidebar'); ?>
</aside>
<?php endif; ?>

条件分岐の書き方

複数条件を書きたい場合

アーカイブを表示する場合

条件指定は各項目によって違います。 アーカイブページ（記事一覧ページ）を表示する場合

カスタム投稿タイプの場合のアーカイブを表示する場合

その他基本的な条件指定

トップページのみ表示させる

is_paged()は複数ページの２ページ目以降、”!”は否定（以外）という意味。

投稿ページのみに表示させる

以上、ご参考になれば幸いです。

GoogleサーチコンソールのDNS設定方法

1. サーチコンソールのサイトにアクセスする。

Google Search Console

search.google.com
2. アカウントを選択してログイン


左側のメニューにある、プロパティー設定の一番下に「プロパティを追加」をクリック

3. ドメインを入力する。

   プロパティタイプの選択画面で、左側の”ドメイン”に、ホームページのアドレスを入力します。
   
   入力したら、「続行」をクリックします。

4. TXTレコードをコピーする。

   DNSレコードでのドメイン所有権の確認画面にて、”TXTレコード”が表示されるので「コピー」ボタンを押します。※コピーした内容は後程入力します。
   「確認」ボタンはDNS設定後に押します。押してもまだエラー画面が出ます。
   次にドメイン側の設定に入ります。

   ※サーバー側（エックスサーバーなど）ではなくて、ドメイン側（お名前ドットコムなど）で作業しますので注意。

お名前ドットコムの場合

1. お名前.com Naviログインにログインします。

Just a moment...

www.onamae.com
2. 上のメニューの「ネームサーバーの設定」をクリック



3. ドロップダウンリストから「ドメインのDNS設定」をクリック、
   各当のドメインを選択し、「次へ」をクリックする。



4. ”DNSレコードの設定を利用する”の右にある「設定する」をクリックする。
5. DNSレコード項目を入力します。



ホスト名：空欄でOK
TYPE：TXT
TTL：3600（そのまま）
VALUE：コピーしたTXTレコード

入力が終わったら「追加」ボタンをクリックします。
画面下の「確認画面へ進む」をクリック。
確認画面が表示されるので「設定する」をクリックします。

value domain（バリュードメイン）の場合

1. value domain（バリュードメイン）にログインする。
   
   

   ログイン | バリュードメイン

   Value Domain(バリュードメイン)は、ドメイン登録実績700万件を誇る国内最大級のドメイン取得・管理サービスです。また、高速・高機能なレンタルサーバーや、SSLサーバー証明書なども提供する「ドメイン・ホスティング総合サービス」です...

   

   www.value-domain.com
2. DNS情報変更画面でDNSの設定を入力する。

左のメニューの「DNS情報/URL転送の設定」をクリックします。

3. DNSレコード項目を入力します。

DNS情報変更画面にて以下の項目を入力します。

※既に書いてあるものはそのままで、新しい行に追加します。

ホスト名：@
ターゲット：コピーしたTXTレコード
タイプ：TXT
MX設定：10

入力後、「変更」ボタンをクリックします。

DNS項目を入力後、サーチコンソールで確認する。

DNSレコード項目を入力後、再度サーチコンソール画面に戻り「確認」ボタンを押すと

緑の”所有権を証明しました”画面が出てきて完了です↓

プロパティに移動すると表示されます。

すぐは反映されませんが、翌日にはデータが表示されました。

赤いエラー画面が出る時

サーチコンソール画面の「確認」ボタンを押すと、エラーが出る場合↓

まとめ

DNSレコードは入力するだけで、一度設定すれば終わりです。
是非参考にしてみてください。

このサイトはエックスサーバー＆お名前ドットコムで作成していますが、エックスサーバー
は操作も簡単で便利！WordPressも簡単にインストール出来ますので初心者にもおすすめです。。
今だと初期費用無料＆１ドメイン無料で付いてきます。

↓まずはお試し！10日間無料！↓

wordpress×Pinterestの相性もよいです。
投稿後のピンを自動公開設定にすると、ブログ画像をいちいち登録しなくても勝手にピンを登録してくれます。
Instagram、Etsy、YouTube のアカウントにも連携でき便利です。

Pinterest(ピンタレスト)の自動公開設定のやり方、
設定後、RSSフィードでエラーになった時の対処法も一緒に教えます。

自動設定のやり方(RSS フィードをリンクする)

1. Pinterestの右上にある”下向き矢印”をクリック
2. 「設定」をクリック
3. 左側のメニューで「ピンを一括作成」を選択します



4. ”RSSフィードURL”を入力


「自動公開する」の下にある「RSS フィードをURL」にRSSフィードURLを入力します

RSS フィードの URL を貼り付けます。

RSSフィードの URLが分からない場合はこのサイトでチェック
https://berss.com/feed/Find.aspx
例：このサイトの場合、RSSフィードURLは、https://anappoko.com/feed/です。
5. 「保存する」をクリックする

公開先のボードをドロップダウンメニューから選択して、「保存」をクリックします。
完了です。

PinterestRSSフィードでエラーが届く

設定後、「RSS フィードでエラーが発生したため、対応が必要です。」のメールが届きました。

内容は、

「フィードに画像が見つかりません。 フィードの各 タグの下にある タグまたは タグに、クオリティーの高い画像があることをご確認ください。」

クオリティーの高い画像・・質が低い？
分からず放置すること数日（その間も連日届くエラーメール・・）

連日エラーメールが届くので、Pinterestにメールで問い合わせてみました。

Pinterestに問い合わせページがあります。(項目が多いですが、どれかしら選んでみました)
https://help.pinterest.com/ja/contact

数日後、Pinterestからの返信メール↓

「弊社のシステムでいくつかの問題が特定されたため、お客様の最近のRSSゲーミングが正しく機能していないようです。問題は、アイテムの画像が小さすぎる(アイテムは画像を指定する必要があり、エンクロージメントまたはメディア:コンテンツタグが大きい、5KB )、または画像のボードにピンが既にあるためです。」

と丁寧に回答いただきました。ありがとうございます。なるほど。

解決！PinterestのRSSエラーメールの原因は画像サイズ！

RSSエラーの原因は、まさかの画像サイズでした。
ということで、画像サイズを大きく変更しました。(600pxから640px)

すると、エラーメールは届かなくなり、ピンも登録されるようになりました。
たったこれだけの作業なのに何日も悩んでいたので、同じく困っている人のご参考になれば幸いです。

]]> https://anappoko.com/pinterest-rss-error/feed/ 0 https://anappoko.com/coconara/ https://anappoko.com/coconara/#respond Sat, 06 Mar 2021 02:06:51 +0000 https://anappoko.com/?p=525 仕事でwordpress制作をしていますが、サーバー・ネットワーク系は得意ではありません。

さくらVPSサーバーを持ち、自分で管理してきました。
コマンドを打ち、時に真っ黒な画面に焦りつつ、かなり時間がかかります。
データ移動の必要が出てきたので、調べて自分で作業しようとしましたが時間もない。

もくじ
1. 目標設定と効率確保を考える
2. おすすめサービス！ココナラ！
3. ココナラの使い方とコツ
4. ココナラに頼んだ結果＆レビュー
   1. ココナラ使っての感想レビュー
5. 最後に

目標設定と効率確保を考える

その作業にどのくらい時間・予算が掛かるか予測する。(目標設定）
予定よりも多いと思ったら、他の人に任せることも必要。(効率確保)

今回の場合
・目標設定：どのくらい時間・予算が掛かる？
→今回はさくらVPSサーバーをエックスサーバー
のレンタルサーバーへwordpress移行作業移行です。このサイトもエックスサーバー。快適、安い！
現状、ネットワーク構築は自分ではまだ知識不足で、まだ未知の世界。。。

サーバー会社に移行作業を頼もうと思いました。
さくらサーバーの場合、１サイト３万円プラスオプションという価格にびっくり。

→自分でやろうとしました。
解決するまでにどのくらい時間が掛かるか予測。
まず構造の知識・コマンドの再確認・実行・検証・・・
自分だったら何時間、何十時間とかかる作業で膨大な時間が掛かる事が予想されます・・・他の本業作業が出来ない！とにかく効率が悪い。

今回の結論
他の人に任せる事も必要。その分自分時間に投資出来る。→結果大正解でした。時間◎効率化◎

おすすめサービス！ココナラ！

他に何かないかなと検索したところよいサービスを発見しました！

実際に使ったサービスはスキルのフリマ【ココナラ】です。

【ココナラ】とは個人の知識・スキルなどみんなの得意を出品したり、購入できる日本最大級のスキルマーケットです。よくいうクラウドソーシングの一つです。WEB関連だと、他にもアイコン・動画・デザイン・Webサイト制作までやってくれます。個人対個人でやりとりします。

ココナラの使い方とコツ

まずは、サービスを探します。→サービスをさがす

頼む人（出品者）の決めるポイント
評価（やはり高い方がよい、レビューも参考に）
実績（それに精通している方が慣れている）

↓実際の画面

この人の場合は実績もあって評価も高いです。

そして、購入！ではなく見積もりしてもらいます。

見積もりのチェックポイント

• 内容
• 価格

分からない事があればどんどん質問した方がよいです。後々問題にならない様に。向こうは慣れているので的確に返してくれます。

内容が良ければ購入画面に進み購入します。
あとはトークルームというチャットの様な場所でメールで連絡しあいます。


ココナラに頼んだ結果＆レビュー

結果　　(ココナラ使用）

• 作業日数：３日で完了。
• 費用：１サイト5000円。（サーバー会社に頼むと3万円）
• 内容：サーバー移行作業(VPSから他のレンタルサーバー)
  、SSL化、メール設定まで（サーバー会社に頼むとオプション代）

もう、有難いの一言です。悩んでいた時間がもったいなかった。

ココナラ使っての感想レビュー

メリット

• とにかく安い
• 安心の作業
• 作業が早い
• やり取りもメールで楽

デメリット

• ネット間の連絡なので少し不安。
• パスワードなどのセキュリティーが不安。

（ただ、ココナラはセキュリティーに関しても、本人確認と機密保持契約(メッセージ機能等の非公開のやりとりでお互いが知り得た秘密情報を第三者に漏らさないことを定める契約)されており、安心でした。
↓依頼者の下に記載されています

機密保持契約（NDA）について（ココナラHPより）
ちなみに４ヶ月経過してますが、何も問題なしです。

最後に

その人にとっては得意なことで、そこに需要を求めている私。
素晴らしい関係だと思います。まさに三方よし！
問題なく大満足の内容でした。

まだ移行作業が残っているので、また頼もうと思ってます。

自分の不器用なところはその道のプロに頼むことも必要。
ほんとココナラサービス使ってみる価値ありです。

ココナラなら他にも占いや恋愛相談などちょっとニッチなものまでありますね。
もし、使用したらここにレビューします。

以上、読んでいただきありがとうございました。

]]> https://anappoko.com/coconara/feed/ 0 https://anappoko.com/edgehogo-off/ https://anappoko.com/edgehogo-off/#respond Mon, 15 Feb 2021 23:38:09 +0000 https://anappoko.com/?p=399 もくじ
1. microsoft edge「セキュリティ保護なし」の解除チェックリスト
2. チェックポイント３つ
   1. ダッシュボード内設定をチェック
3. 裏技：開発者ツール(デベロッパーツール）で確認する

microsoft edge「セキュリティ保護なし」の解除チェックリスト

結論から言うと、

http://～　→　https://　に変更する！

これ一点です。

私の場合、アドレスバーはhttps://～になっているのに、
microsoft edgeだけ「セキュリティ保護なし」と表示されました。



microsoft edgeだけ「セキュリティ保護なし」と表示される

※WordpressのテーマはCocoonを使用しています。
※サーバーはエックスサーバーを使っています。

チェックポイント３つ

• • 記事内リンクをチェックする
  • CSSファイルをチェックする
  • 設定をチェックする

投稿記事内のリンク・CSSファイルは、検索(Ctrl+F)で”http://”を検索し、”https://”修正。

まだ表示変わらず。。。

ダッシュボード内設定をチェック

設定は以下のものをチェック。

• ウィジェット
• 吹き出し設定
• Cocoon設定の中

✅ウィジェット
ダッシュボード＞外観＞ウィジェットから、設定内にリンクが貼ってあるのでチェック。

※テーマがCocoonの場合、
✅吹き出し設定
ダッシュボード＞Cocoon 設定＞吹き出し
画像をリンクしている箇所をチェック。

✅Cocoon設定の中
ダッシュボード＞Cocoon 設定
広告・ヘッダー・404ページ・アピールエリア・AMPのリンクチェック

まだ表示変わらず。。。

裏技：開発者ツール(デベロッパーツール）で確認する

私の原因はヘッダーの画像リンクでした。。。

その際、発見方法がデベロッパーツールでした。

✅デベロッパーツールの使い方

１．ブラウザ右上の「…」をクリック
２．その他のツール＞開発者ツール(デベロッパーツール）をクリック
３．中央あたりの「コンソール」タブをクリック
４．〇件の警告をクリック

文章の中に「～ image ‘http://」を発見！どうもロゴの画像リンクが怪しい・・

ダッシュボード＞Cocoon 設定＞ヘッダー＞ヘッダーロゴ

http://～　→　https://　に変更！



”変更をまとめて保存”をクリックして保存する。

すると・・・↓



すると、無事鍵マークになりました！

以上、同じ悩みの人はご参考になれば幸いです。

]]> https://anappoko.com/edgehogo-off/feed/ 0 https://anappoko.com/wp_table-display/ https://anappoko.com/wp_table-display/#respond Fri, 25 Dec 2020 06:01:42 +0000 https://anappoko.com/?p=130 最近、WP制作においてカスタムフィールドの便利さに気づき、制作しながらもここでつまずいたので忘備録として記載しておきます。
もくじ
1. カスタムフィールドの表を載せるにはAdvanced Custom Fields: Table Fieldをインストール
   1. インストール方法
2. カスタムフィールドの項目に表を追加
3. 投稿画面より、表に入力する。
4. 【コピペOK】表示させるphpファイルにコードを書く

カスタムフィールドの表を載せるにはAdvanced Custom Fields: Table Fieldをインストール

カスタムフィールドに表を表示させるには「Advanced Custom Fields: Table Field」のプラグインをインストールします。



インストール方法

ダッシュボード＞プラグイン＞新規追加＞検索枠に「Advanced Custom Fields: Table Field」を入れてください。
Advanced Custom Fields: Table Fieldの右上にある”今すぐインストール”をクリックします。

インストール完了後、有効化をクリックして有効にしてください。

カスタムフィールドの項目に表を追加


カスタムフィールド設定画面より、フィールドグループを新規追加を押します。
フィールドタイプの選択ドロップダウンリストの一番下に”Table”があるので選択します。

投稿画面より、表に入力する。


投稿画面より、新規追加を押し投稿を書きます。
表を入力する箇所にあるプラスマーク”＋”で行や列を追加出来ます。


入力したい箇所をクリックすると、
水色枠が表示されるので、テキストを入力します。

【コピペOK】表示させるphpファイルにコードを書く

表示させるphpファイルに表示したい箇所に以下のコードを書きます。

テーブルのフィールド名：カスタムフィールドの項目追加したさいのフィールド名
CSSデザインする際のクラス名：あとで表をデザインするためにクラス名を入力



//テーブルのデータを取得
<?php
$table = get_field( 'テーブルのフィールド名' );
if ( ! empty ( $table ) ) {
    echo '<table class="CSSデザインする際のクラス名">';
        if ( ! empty( $table['caption'] ) ) {
            echo '<caption>' . $table['caption'] . '</caption>';
        }
        if ( ! empty( $table['header'] ) ) {
            echo '<thead>';
                echo '<tr>';
                    foreach ( $table['header'] as $th ) {
                        echo '<th>';
                            echo $th['c'];
                        echo '</th>';
                    }
                echo '</tr>';
            echo '</thead>';
        }
        echo '<tbody>';
            foreach ( $table['body'] as $tr ) {
                echo '<tr>';
                    foreach ( $tr as $td ) {
                        echo '<td>';
                            echo $td['c'];
                        echo '</td>';
                    }
                echo '</tr>';
            }
        echo '</tbody>';
    echo '</table>';
}
?>

あとは上のコード内のCSSデザインする際のクラス名を指定し、CSSでデザインする。




↑こんな感じに表示されました。

もし表示につまずいていた方がいたら（私も含め）参考にしていただければ嬉しいです。
読んでいただきありがとうございました。

]]> https://anappoko.com/wp_table-display/feed/ 0