サポート » プラグイン » iOSでPWAのアイコンを表示させるためには、画像ファイルをWordPressのうちどのフォルダに保存すれば良いでしょうか?

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっています。
    下記の質問についてご教示を願います。

    【質問の主旨】

    iOSでPWAのアイコンを表示させるためには、画像ファイルをWordPressのうちどのフォルダに保存すれば良いでしょうか?

    【質問の補足】

    1.
    現在、「ヘルプが必要なページ」についてLight HouuseでPWAのチェックをしたところ、

    Provides a valid apple-touch-icon
    Warnings: <code>apple-touch-icon-precomposed</code> is out of date; <code>apple-touch-icon</code> is preferred.

    と表示されます。

    2.
    こちらのブログ記事を確認すると、iOSでPWAを有効化するためには、下記の記述をすれば良いと書かれています。

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="エコテキブログ">
    
    <link rel="apple-touch-icon" href="/config/icons/app-icon-72x72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="/config/icons/app-icon-114x114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="/config/icons/app-icon-120x120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="/config/icons/app-icon-144x144.png" sizes="144x144">

    それぞれのアイコンを保存するディレクトリとして”/config/icons/”が使われていますが、WordPressの場合、どのディレクトリに該当するのかよく分かりません。

    以上、ご確認よろしくお願い申し上げます。

    • このトピックは2ヶ月、 1週前にechizenyaが編集しました。理由: 記事に誤字があったため

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • CG

    (@du-bist-der-lenz)

    普段アップロードしている「メディア」から選んでいます。

    @du-bist-der-lenz さん。
    コメントありがとうございます。

    WordPressの管理画面にあるメディアライブラリからアイコン(4つ)を追加してheader.phpのheadタグ内に下記のコードを追記すると、質問でコメントした注意文が表示されなくなりました。

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="エコテキブログ4">
    
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="apple-touch-icon" href="/wp-content/uploads/2019/09/icon-72x72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="/wp-content/uploads/2019/09/icon-114x114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="/wp-content/uploads/2019/09/icon-120x120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="/wp-content/uploads/2019/09/icon-144x144.png" sizes="144x144">

    今後ともどうぞよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。