communityfield’s diary

サイト開発のメモです。メモなので結構適当です

サイトのマルチコンテンツ化

自分の運営するサイトにはWordPressを使っているが、基本的にはブログ用のCMSなのでwikiのような情報コンテンツサイトやポータルサイト、コミュニティサイトとするのはプラグインを使ったりPHPをいじる必要がある

 

現在のコミュニティサイトにwikiコンテンツをプラスしたいと考えているが、問題として同じ領域にメニューを表示すると膨大になる

なのでwikiコンテンツのページではサイドバーウィジットを切り替え、メニューとして使用することにしてみた

1.以下のサイトを参考にウィジットエリアを追加

WordPressのウィジットエリアを追加する方法 | Web’Notes

2.固定ページ用にウィジットを切り替えた固定ページテンプレートを用意

3.用意したテンプレートでwikiコンテンツを作成

4.新規メニューを作り、それをウィジットエリアに追加した

以上

 

そういえばカスタム投稿を作りテンプレートを固定すれば毎回指定する必要なかったのでそちらの対応を後日しようと思う

メニュー専用ウィジットを作りたいところ

 

話が変わるのだがbbpressのトピックにトピック名が使われ日本語スラッグ 担ってしまうのをなんとかしたかった

この「bbPress Permalinks with ID」プラグインは有効化して「パーマリンク設定」をなにも変更せずに「変更を保存」としてリンクを更新するだけでトピックURLにIDを使用してくれるようになる模様

wordpress.org

古いバージョンのBBPressではもともとこの仕様だったが、トピック名をURLを使うように変更されたみたい(公式フォーラムで見かけた)

英語ならいいが2バイト文字を使う圏は困っちゃうよね

 

コンテンツ重視にシフトチェンジ

現在までにサーバー構築を行い、サイトの機能とデザイン整備に時間をかけてきた

不十分なところもあるが一通りは揃ったなかでコンテンツが置き去りになっていたのに気づく

何事もバランスがとれてないと、ボトムネックがあるとそれ以上いくら力を入れても効果が薄い

 

てなわけで今後コンテンツの充実に力を入れていくことにしたいと思う

昨日と今日の作業

昨日はbbPressテンプレート調整の残りと返信の入れ子レイアウトなど気になったところを調整した

buddyPressの方はほぼ手付かずなので、近々手をつけたいところ

 

今日やってみたいのは画像のキャッシュ化と表示

具体的には、画像のURLを貼る→キャッシュ化→imgタグで画像表示と下にホスト名のリンクをいれる

たぶんNeverまとめも同じような構成だと思う

 

そのうちに寝ログさんの以下記事を参考に進めたいと思う

nelog.jp

 

最近思い付きの小手先の発案と作業が続いてしまっているので、今一度利用者にどういったフローで利用してもらいたいかを全体の機能構成とともにまとめ直したほうがいいなーと以下の記事を読んで気づかされた

 数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている8つのこと。 - 笑顔を創りたいWeb屋の日常

 

話が変わりスマホだと複数タブやウィンドウの切り替えはストレスになる

ネイティブアプリだと参考リンクは全画面オーバーレイで表示し、読み終われば閉じて元の画面に戻れるので操作しやすい

これをモバイル用のサイトにやってみようと企んでるところ

現在のページ上に、別HTMLの内容を重ねて表示する方法 [ホームページ作成] All About

 

しかしネイティブアプリ化したほうが早くて使いやすいんじゃと思ったり

bbpressの画像添付とテーマ適用

今日の作業はbbpressにプラグインを使って画像添付機能を付加するのと、simplicityテーマへのbbpressの適用を進めた

 

下記のプラグインbbpressに画像添付機能をつけるプラグイン

改良は特にしてないのでcssをいじった程度

ja.wordpress.org

 

bbpressのテーマ適用はまず調査に時間がかかった

どこのphpファイルを読んでいるのか「What The File」というプラグインを使って調べてみたがいまいち読んでるファイルが違うようだった

ja.wordpress.org

なので以前見つけた下記のサイトのbbpressのファイル説明一覧を参考にして解決した

[WordPress] bbPress 2.1 テーマ作成メモ | unlinked log

ファイル名説明
archive-forum.php フォーラム一覧ページ
archive-topic.php  
page-create-topic.php トピック作成ページ。固定ページテンプレート
page-forum-statistics.php フォーラムの統計情報ページ。固定ページテンプレート
page-front-forums.php フォーラム一覧ページ。固定ページテンプレート
page-front-topics.php トピック一覧ページ。固定ページテンプレート
page-topics-no-replies.php 返信のないトピック一覧ページ。固定ページテンプレート
page-topic-tags.php トピックタグ一覧ページ。固定ページテンプレート
page-user-login.php ユーザーログインページ。固定ページテンプレート
page-user-lost-pass.php パスワード忘れたページ。固定ページテンプレート
page-user-register.php ユーザー登録ページ。固定ページテンプレート
single-forum.php フォーラム個別ページ
single-forum-edit.php  
single-reply.php 返信個別ページ
single-reply-edit.php 返信編集ページ
single-topic.php トピック個別ページ
single-topic-edit.php トピック編集ページ
single-topic-merge.php トピック結合ページ
single-topic-split.php トピック分割ページ
single-user.php ユーザーページ
single-user-edit.php ユーザー情報編集ページ
single-view.php  
taxonomy-topic-tag.php トピックタグページ
taxonomy-topic-tag-edit.php

bbpressプラグインフォルダのtemplates>default>extrasにある上記は、テーマフォルダ直下に格納しテーマ適用の調整をおこなった(途中だけど)

そしてそれを読むようになって解決

 

 loop系はテーマフォルダにbbpressフォルダを作って格納してある

ちなみに使わせていただいてるテーマはSimplicityでカスタムしやすいです

wp-simplicity.com

bbpressのテンプレート調整はまだかかりそうだしbuddypressの方も調整したいところ

デザイン調整とスライドタブ

昨日からデザイン調整等に費やした

特に表示不具合とh1〜h5のデザイン修正をした

 

今日は主にスワイプでタブ移動もできるタブページをローカルでテストした

www.tam-tam.co.jp

wordpressはデフォルトだと$が使えないので$をjQuery

 

 実際にサーバー環境に適用してみた

スマホだと縦にと横にスクロールする際に縦横にブレてしまう

ちょっとこれは操作しにくいので今後固定できるように改良していきたい

communityfield.net

 

それにしてもこういう流用による実装は、技術者でない人にはチョチョイノチョイでできると思われがちだが、既存のものに組み込むにはそれなりの工数がかかる

競合しないように確認と調整、デザイン・レイアウトの調整、動作確認と

 

 

bbpressに貼られた画像URLをimgタグ化

bbpressに貼られた画像URLをimgタグ化し、引用元をaタグでホスト名を下にいれる処理をしたかった

いかが調べて「functions.php」に追記した内容

//イメージを自動表示
function wp_embed_handler_img( $matches, $attr, $url, $rawattr ) {
$url_array = parse_url($url);
$embed = sprintf(
'<img src="'.$url.'"><a href="'.$url_array['host'].'"></br>'.$url_array['host'].'</a>',
esc_attr(rawurlencode($matches[0]))
);
return apply_filters( 'embed_img', $embed, $matches, $attr, $url, $rawattr );
}
wp_embed_register_handler( 'img', '/^https?(:\/\/[-_\.!~*\'()a-zA-Z0-9;\/:\@=+\$,%#]+)(\.jpg|\.jpeg|\.png|\.gif)$/', 'wp_embed_handler_img' );

 参考にしたのは以下のサイト

WordPress の自動メディアリンクにメディア形式を追加する | dogmap.jp

【PHPの「parse_url」関数について知りたかったので調べました】 | 今村だけがよくわかるブログ

 

 

 

bbpressのtopicにアイキャッチ画像を設定する

コミュニティサイトを作ったものの、いまいち味気ない

はてなブックマークさんみたいなアイキャッチ画像を入れたいなと

以下のプラグインを使えばbbpressのトピックにアイキャッチ画像を設定できそう

wordpress.org

ただあまりプラグインで対応したくないのでテーマファイルを編集することにした

bbpressのloop-single-topic.phpにsimplicityのアイキャッチ画像を入れ込んだ

<figure class="entry-thumb">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb150', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>
<?php else: // サムネイルを持っていない ?>
<a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" /></a>
<?php endif; ?>
</figure><!-- /.entry-thumb -->

あとはcssだけ少しいじり動作が確認できた