カテゴリー別アーカイブ: WordPress

[WordPress] ツイートボタンの設置方法

WordPressの記事にTwitterのツイートボタンを設置します。
今回は記事のタイトルの直下に設置することにしました。

/wp-content/themes/twentytwelve/content.php を開き、

<a href=”http://twitter.com/share” data-count=”horizontal” data-via=”****” data-text=”<?php the_title(); ?>” data-url=”<?php the_permalink() ?>” data-lang=”en”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>

を</header>タグ直前に追加する。

ここでのポイントとして、WordPressの関数を呼ぶことで記事のタイトル(the_title)と記事のリンク(the_permalink)を動的にコードに埋め込んでいます。

****は、あなたのTwitter IDを入れましょう。Twitter公式サイトにもありますが、オプションを変えるとあなたの好みに応じてカスタマイズできます。
表示される言語も選択できるようになっていて、「Tweet」がよければ data-lang=”en”を、「ツイート」がよければdata-lang=”ja”にすれば変更できます。

これだけだと記事のタイトルとの余白が無いので、

/wp-content/themes/twentytwelve/style.css を開き、

iframe.twitter-share-button {
margin-top: 10px;
}

を追加すると、ボタンの上に余白が入って見やすくなりました。

[WordPress]「コメントをどうぞ」のリンクの位置を変更する方法

WordPress (ver 3.5.1 / テーマTwenty Twelve)で読者からのコメントを有効にすると、記事のタイトルの下に「コメントをどうぞ」のリンクが表示されるようになります。

タイトルの直下だと正直微妙なので、表示場所を記事の下部へ変更します。

/wp-content/themes/twentytwelve/content.php を開き、

<?php if ( comments_open() ) : ?>
<div class=”comments-link”>
<?php comments_popup_link( ‘<span class=”leave-reply”>’ . __( ‘Leave a reply’, ‘twentytwelve’ ) . ‘</span>’, __( ’1 Reply’, ‘twentytwelve’ ), __( ‘% Replies’, ‘twentytwelve’ ) ); ?>
</div><!– .comments-link –>
<?php endif; // comments_open() ?>

をカットして、</footer>タグの直前にペーストします。

これですべての記事で「コメントをどうぞ」のリングが記事の最下部に表示されるようになりました。

==

追記:2013.03.26

編集方法

編集方法には2種類あります。
A) ファイルを直接編集する方法
B) WordPressの管理画面から、上記ファイルを編集する方法

A) ファイルを直接編集する方法について

ファイルサーバーにアクセスしてファイル(content.php)をエディタで開き、上記部分を編集した後、保存します。

B) WordPressの管理画面から、上記ファイルを編集する方法について

1. WordPressの管理画面を開きます。
2. 左のメニューアイコンで(上から6つ目の)「外観」メニューにマウスカーソルを乗せると、サブメニューが表示され、その一番下「テーマ編集」をクリックします。
ここから基本的なテンプレートの編集が可能です。
3. 右側の「テンプレート」のリストから「content.php」をクリックしてファイルの編集画面を出します。
4. 上記部分を書き換えた後、「ファイルを更新」ボタンをクリックしておしまいです。

Q&A

Q. テンプレートを編集したのに表示が切り替わらない
A. まずはBの手順でWordPressの管理画面からソースコードがきちんと変更できているか、確認します。
プラグインの「WP Super Cache」が有効になっていると、キャッシュが残っているために変更が反映されるまでに時間がかかることがあります。
有効になっている場合、開発の際は一時的に停止します。
1. WordPress管理画面の左のメニューアイコンで(上から7つ目の)「プラグイン」メニューをクリックし、プラグインの一覧を表示する。
2. プラグインの中の「WP Super Cache」の「停止」というリンクをクリックして、一時的に無効化します。

[WordPress] LaTeXのプラグインを導入する方法

管理画面の左側のメニュー「プラグイン」-> 「新規追加」の画面に移動し、「latex」などの単語で検索すると、たくさんLaTeXのプラグインが出てきます。

LaTeX for WordPressはスクリーンショットを見るとフォントが汚い感じがしたので、今回は「WP LaTeX」を導入しました。
インストールして有効にするまで楽々ですね。

このままだとちょっと問題があります。
このブログでは外観のテーマにTwenty Twelveというスタイルを使用しています。

LaTexのプラグインが生成した記事内の画像に対してもスタイルが適用されてしまい、角丸と影がついてしまいます。
これでは読みにくい…。

そこで、スタイルシート(cssファイル)を書き換えることで対応しました。

本来はプラグインの生成するcssを書き換えるほうがいいのでしょうけど、探すのが面倒だったのでTwenty Twelveのcssファイルを書き換えます。

/wp-content/themes/twentytwelve/style.css を開き、

img.latex {
border-radius: 0px;
box-shadow: none;
}
を追加。

これで記事内のLaTeX画像に角丸と影のスタイルが適用されなくなりました。