画像をリンクにする – WordPress

WordPressのページ編集において、画像を追加してそれを他のページへのリンクにしたい場合。

新規に画像を設置して他のページへのリンクにする場合

  • 「アップロード/挿入」をクリックして画像をアップロード
  • リンクURLを編集して「投稿に挿入」をクリック。
  • プレビューで確認して保存(完了)

設置済みの画像を他のページへのリンクにする場合

  • 編集画面でイメージタグを選択して「link」をクリック
  • URLを入力し、タイトルなど適宜編集して「Add Link」をクリック
  • プレビューで確認して保存(完了)

WordPressのダッシュボードで文字化け

先週あたりから、WordPressのダッシュボードで作業をしているとメニューやコンテンツの一部が文字化けするようになりました。ちょうどWordPressが3.3にアップデートされたこともあってそれが原因かと思っていたのですが、どうやらChrome(ブラウザ)とWindowsXPのフォントの組み合わせによる問題だったようです。

まず、Chromeで文字化けが起きたときに確認すべきこと。
「設定」->「ツール」->「エンコード」

エンコードが「自動検出」、「UTF-8」となっていること。
※ご利用の状況によってはエンコードの種類が異なるかもしれません。
エンコード

「設定」->「オプション」->「高度な設定」->「フォントをカスタマイズ」


※この設定で文字化けが解消できるということではありませんので、念のため。
※エンコードを「日本語(Shift_JIS)」にすると改善されるという記事もあります。

chromeのみの文字化けについて(Googleグループ)
例えば、あるウェブページのcssでfont-familyに英語のフォントが指定されていると、WindowsXPのバグによって日本語フォントへの置き換えができず文字化けしてしまうようです。
確かに、過去にAdobe製品他をインストールしたことがあっていろいろなフォントが入っていました。
そして、WordPressのダッシュボードには、たとえば次のようなcssが設定されています。

body :not(textarea) {
font-style: normal !important;
font-family: Arial, "Bitstream Vera Sans", Helvetica, Verdana, sans-serif !important;
}

そこで、Chromeのデバッグ機能によってcssを調べてみました。

※文字化けしている部分をマウス右クリックで「要素を検証」
要素を検証

すると画面右下にスタイルが表示されますので、その中から font-family を指定している部分を見つけてフォント名のところをダブルクリックして編集できる状態にします。

elements-styles
この状態で、フォント名を一つずつ削除していって文字化けが解消されたら
そのときに削除したフォントが原因となっている可能性があります。

問題のフォントが特定できたら、C:\WINDOWS\FONTS フォルダを開いて削除(念のため他のフォルダへ移動)します。このとき、フォントキャッシュによって問題が改善されない場合がありますので、WindowsをSafeモードで起動してフォントキャッシュ(fntcache.dat)を削除します。
※Safeモードでfntcache.datをファイル検索でさがして削除して再起動。

wp-multibyte-patchプラグイン

プラグインが設置されているフォルダ内にサンプルの設定ファイル(wpmp-config-sample.php)がありますので、それをコピーして /wp-content/wpmp-config.php ←ここに保存します。その際に、次の行を編集します。

$wpmp_conf['patch_admin_custom_css'] = true;
//管理パネルの独自外部 CSS 読込み機能の有効化 (true) 、無効化 (false)
これを false にしてみる。

TwentyEleven – ヘッダー画像サイズのカスタマイズ

今回は、ヘッダ画像の高さのみカスタマイズしてみます。
デフォルト値 288px を 200px にする場合。
※TwentyElevenの子テーマが用意されていることを前提としています。

修正ファイルは次の2つ

  • style.css
  • fuctions.php

style.css の修正箇所

section.feature-image.large {
border: none;
max-height: 200px; /*288px;*/
padding: 0;
width: 100%;
}

functions.phpの修正箇所

function twentyeleven_setup() {
/* (省略) */
require( dirname( __FILE__ ) . '/../twentyeleven/inc/theme-options.php' );
require( dirname( __FILE__ ) . '/../twentyeleven/inc/widgets.php' );
/* (省略) */
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 200 ) );
/* (省略) */
}

require()の行は、子テーマから参照する場合の親テーマのパスに合わせます。

TwentyEleven のウィジェットの余白

WordPressのデフォルトテーマ(TwentyEleven)でウィジェットを設置すると、
縦方向に結構余白ができてしまいますので調整してみました。
数値はお好みでどうぞ。

対象ファイル:style.css

【修正前】
.widget {
	clear: both;
	margin: 0 0 2.2em;
}
【修正後】
.widget {
	clear: both;
	margin: 0 0 0.4em;
}

サブフォルダに設置したWordPressをドメインのトップに表示する

詳しい説明は、こちらのページをご覧いただくとして…
「WordPress を専用ディレクトリに配置する」

サブフォルダにインストールした状態で、ページを作成しておいて、
ドメインのトップページとして見せたい場合。
インストール場所:http://example.jp/wordpress/
公開したい場所:http://example.jp/

最初に前準備として、パーマリンクの設定をしておきます。
ダッシュボード > 設定 > パーマリンク設定
初期状態は、

http://example.jp/?p=123

のようになっていると思います。これを、例えば「数字ベース」やその他
お好みの形式に変更しておきます。
そして、「変更を保存」すると wordpress フォルダ内に .htaccess ファイルが
生成されます。
このとき、フォルダへの書き込み権限がない場合は書き込みができるように
パーミッションを変更するか、あるいは手作業にて .htaccess を設置します。

次に、ダッシュボードから、設定 > 一般設定 を開きます。
WordPress のアドレス (URL):http://example.jp/wordpress
サイトのアドレス (URL):http://example.jp/wordpress

このようになっていると思います。これを、
WordPress のアドレス (URL):http://example.jp/wordpress
サイトのアドレス (URL):http://example.jp/
このように変更して「変更を保存」します。

そして、インストール場所(サブフォルダ内)にある index.php と .htaccess を
FTPでダウンロードします。
FTPソフトによっては .htaccess のようなドットから始まるファイルが見えない
場合がありますので、利用するソフトウェアの説明に沿って見えるようにしておいて
ください。

ダウンロードした index.php をテキストエディタで次のように編集します。
※wordpressの部分はインストール場所に合わせて適宜読み替えてください。

修正前
 require(‘./wp-blog-header.php’);
修正後
 require(‘./wordpress/wp-blog-header.php’);

編集内容を保存したら、index.php と .htaccess をダウンロードした場所
ではなくて、一つ上のフォルダ(ルート)にアップロードします。
例)
コピー元
 public_html/wordpress/index.php
コピー先
 public_html/index.php
.htaccess も同様にコピーします。

これまでの作業が完了したら、

http://example.jp/

このアドレスでWordPressで作成したページが見えるか確認します。

TwentyEleven – テーマのカスタマイズ

WordPressテーマの “TwentyEleven” を使っている場合。

固定ページで親子関係を設定すると、子ページのタイトルがサブメニューとしてプルダウン表示されます。
このとき、サブメニューのタイトルが長いと、複数行に折り返されてしまいます。
この設定は、style.cssの中の次の部分です。

#access ul ul {
	/*(省略)*/
	width: 188px;
	/*(省略)*/
}

#access ul ul a {
	/*(省略)*/
	width: 168px;
}

この数字を大きくすることで調整できます。

ここで念のため。

デフォルトのテーマを直接編集するとバージョンアップで上書きされてしまいますので、子テーマを作ってからカスタマイズします。

詳しくは、こちら。
子テーマ – WordPress Codex

Wordbooker – (その2)

[Blog Level Customisation]
Default Publish Post to Facebook: *(チェック)

[User Level Customisation]
Default Publish Post to Facebook : *(いいえ)
*(instead of)
publishing to a personal wall, post to the following fan page :
*(Netplan.Matsuyama)

※ユーザレベルの設定を変えてみました。