【WordPress】テーマで指定されたCSSがうまく読み込めない

WordPressで他人が作成したテーマを使っているとCSSがうまく読み込めない時があります。
条件としては以下の両方に当てはまっている場合だと思います。

  • WordPressの管理画面と公開画面でドメインが違う
  • テーマ内にstyle.css以外のCSSファイルがあり、それをwp_enqueue_styleを使って読み込んでいる

このとき、ブラウザの開発ツールでコンソールを表示すると、以下のようなエラーが発生していると思います。

Access to Font at 'http://yourdomain1.com/wp-content/themes/sparkling/assets/fonts/glyphicons-halflings-regular.woff2' from origin 'http://yourdomain2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yourdomain2.com' is therefore not allowed access.

クロスドメインなどが原因のようなのですが、手早く直したかったので
以下の修正をして直しました。

①wp_enqueue_styleをしている箇所をコメントアウトする。(テーマによるが、function.phpなどに記載あり)

// wp_enqueue_style( 'bs', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
// wp_enqueue_style( 'awe', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );

②htmlのheadタグ内にてCSS読み込み処理を記載する。(テーマによるが、header.phpなどに記載あり)
※以下例ではCDNを指定しています。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

これで正常にCSSが読み込まれ、ブラウザのコンソールからもエラーが消えました。

Share

【WordPress】SyntaxHighlighter Evolvedを高速化する

Wordperssのプラグイン『SyntaxHighlighter Evolved』を入れていたところ
画面表示がとても遅くなったので高速化しました。

〜〜〜2017/2/11 追記〜〜〜
プラグインを変えた方が早いかもしれないです
「WP Code Highlight.js」に変えてみたところ、表示は問題なく早いですし
paddingなどもこちらの方が気に入ってます。
〜〜〜追記終わり〜〜〜

■環境
CentOS 7.3
Wordpress 4.7.2
SyntaxHighlighter Evolved 3.2.1
※前提条件として、Wordpressを置いてあるサーバを操作できる権限があることとします

『SyntaxHighlighter Evolved』は各種言語に対応しているのですが、
実際、自分は書かないなーという言語も入っているので、不要なものは
プラグインで読み込まないようにします。

具体的には、プラグイン内のPHPファイルを修正し、不要な言語の設定を読み込んでいそうな行を
コメントアウトします。

# cd /{wordpressが配置されているディレクトリ}/wp-content/plugins/syntaxhighlighter
# vim syntaxhighlighter.php

コメントアウト箇所は114行目あたりから始まる以下の部分です。

wp_register_script( 'syntaxhighlighter-brush-○○○',〜〜〜 $this->agshver );

上記の「○○○」部分に言語名が入っているので、不要な言語の行はコメントアウトします。

あと、あまり効果があるか分かりませんが、テーマも使わないものはコメントアウトしてしまいました。
該当箇所は149行目あたりから始まる以下の部分です。

wp_register_stype( 'syntaxhighlighter-theme-○○○',〜〜〜 $this->agshver );

上記の「○○○」部分にテーマ名が入ります。

上記でコメントアウトした言語、テーマについて
下の方の行で配列に格納されているので、そこもコメントアウトします。

言語についての配列は、162行目あたりにあります。

$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
    'as3'           => 'as3',
    'actionscript3' => 'as3',
    'bash'          => 'bash',
    'shell'         => 'bash',
    以下略

テーマについての配列は、243行目あたりにあります。

$this->themes = (array) apply_filters( 'syntaxhighlighter_themes', array(
    'default'    => __( 'Default',      'syntaxhighlighter' ),
    'django'     => __( 'Django',       'syntaxhighlighter' ),
    'eclipse'    => __( 'Eclipse',      'syntaxhighlighter' ),
    'emacs'      => __( 'Emacs',        'syntaxhighlighter' ),
    'fadetogrey' => __( 'Fade to Grey', 'syntaxhighlighter' ),
    'midnight'   => __( 'Midnight',     'syntaxhighlighter' ),
    'rdark'      => __( 'RDark',        'syntaxhighlighter' ),
    'none'       => __( '[None]',       'syntaxhighlighter' ),
) );

上記箇所を適当にコメントアウトすると、画面表示がいくらか早くなりました。

Share