web-dev-qa-db-ja.com

SVGスプライトのアイコンをボディタグに含める方法

Bodyタグの後にSVGアイコンファイルを含めたいのですが、このコードを使用しています。

<?php include_once("assets/img/sprites.svg"); ?>

しかし、私はこのエラーが出ます：

構文解析エラー：構文エラー、1行目の/home/ostadba1/public_html/wp-content/themes/ostad/assets/img/sprites.svg内の予期しないT_STRING

その目的は、これらのアイコンを1行のコードで使用したいということです。

<svg class="icon"><use xlink:href="#shopping-cart"></use></svg>

SVPファイルをWordPressに正しくロードする方法を教えてください。

theme-developmentsvg
4
Sajad

これは、SVGをPHPに含める方法ではないためです。
include_onceはPHPファイルをインクルードするために使用されます。

このエラーの原因：

PHP Parse error: syntax error, unexpected version (T_STRING)

xMLバージョンが定義された時点では、PHPはSVGファイルの先頭を解析できませんでした。

<?xml version="1.0" encoding="utf-8"?>

解決策1 ：これを修正するには、SVGファイルからXMLヘッダータグを完全に削除してください。

解決策2： これらのチュートリアルに従ってください。 （推奨）

  1. 完璧なWordPressインラインSVGワークフロー
  2. WordPressテーマでのインラインSVGスプライトの使用

これはあなたのテーマにSVGを含めるためのはるかに良い方法です。どちらも同じ概念を説明しています。
これらのチュートリアルは、SVGをPHPの WordPress に含める方法を理解するのに役立ちます。

どうやってbodyタグの後に含めるの？
これには、必要に応じてテーマファイルでこれらのチュートリアルを使用する必要があります。
例えば、あなたのテーマがindex.phpでbodyタグを開いた場合、index.phpを修正してそこにSVGを含める必要があります。

解決策3： 

<?php echo file_get_contents("filename.svg"); ?>

SVGファイルの内容は、PHPファイルのHTMLセクションの任意の場所にエコーすることができます。


ただし、テーマファイルを再生するには、PHPとWordPressの知識がある程度必要です。

5
devkabiir

コマンドinclude_once()はphpファイルをインクルードするために使用されます。 SVGは単なる画像ファイルです。ほとんどの場合、画像ファイルを扱う方法と同じように扱われるべきです。

あなたの場合、あなたがそれをフォントとして使いたいのなら、あなたはそれをあなたのCSSファイルに含めなければなりません。

@font-face{
    font-family:my-font;
    url('YOUR SVG URL HERE') format('svg');}

それからあなたはあなたの定義されたフォントコードを使ってスプライトの異なる部分を呼び出すことができます。 SVGをフォントとして使用する方法についてはたくさんのガイドがあります。

別の選択肢は、Brianがコメントで示唆しているように、<img>タグを使うことです。

SVGを背景画像として使用することもできます。これは、CSSでjpgファイルをbackground-imageプロパティとして使用するのと同じ方法です。

0
Jack Johansson