drupal 7 Pixture Reloadedトピックのアップグレードプロセス
1.Pixture Reloaded Theme概要
私たちがウェブサイトを開発する際にPixture Reloadedのテーマを選んだ理由は、主に海外で広く使用されているため、HTML 5をサポートし、iphone、アンドロイド携帯電話、各種ipad、普通のパソコンなど豊富なフロントエンドデバイスと互換性があるからです.
Pixture Reloaded ThemeはAdaptive Themeに基づいて再設計され、モバイルサポート、強力なレイアウトなど、その特徴を継承しています.
新しいバージョンのPixture Reloadedは、GoogleフォントとAdaptive Themeベースのモバイルデバイスのサポートを強化しました.
Pixture Reloaded 7.x-2.x基本特徴:
•18色スキーム
•カスタマイズされたカラーオプションのカスタマイズ
•Superfishモジュール内蔵
•Nogginモジュールは追加の機能をサポート
•構成可能なlayout–多くのオプション
•モバイルサポート(携帯電話、タブレット、iPad、iPhoneなど)
•フォント選択(Googleフォントを含む)
•フォントサイズの設定
•Headingスタイル
•フィレットの設定
•ボックスシャドウとバックグラウンドテクスチャのオプション
•画像位置設定
•Menu bulletsオプション
•Breadcrumb設定(開発版pixture_reloaded-7.x-3.x-devではこの機能はありません)
•検索結果表示設定
•オプションの水平ログインブロック設定
•18領域に3列と4列のパネルを含む
詳細については、以下を参照してください.http://www.innovatedigital.com/node/803
http://www.innovatedigital.com/drupal
2. Pixture Reloaded Themeをアップグレードする理由:
2012年初頭にウェブサイトを開発する際、Pixture Reloaded(7.x-2.x)を選択し、使用中にいくつかの深刻な問題が発見された.
IE 8はウェブサイトの各ページを開き、SysFader:iexploreが頻繁に現れる.exeアプリケーションエラーにより、IE 8ブラウザがクラッシュし、問題が深刻になりました.同時に国内で広く使われているIE 6のサポートが悪い、画像変形、ブロックずれ、速度が遅いなどの問題がある.
一部の原因はマイクロソフトのブラウザでよく知られている問題ですが、移行はまだ移行しなければなりませんが、Chrmoe、IE 9+、Firefoxなどのブラウザでよく表現されています.
次の方法で解決しようとしました.
A:「サードパーティブラウザ拡張の有効化」を外します.
IE 8を開き、「ツール->インターネットオプション->アドバンスド->ブラウズ->サードパーティブラウザ拡張機能の有効化*」を見つけ、選択を解除してからIE 8ブラウザを再起動します.
まだ問題が解決されていないことがわかりました.これも問題を解決する方法ではありません.私たちは使用者にこれらのことをさせることはできません.
B:Webサイトのパフォーマンスの最適化.
届かないthemeを無効または削除し、Webサイトのパフォーマンスキャッシュを開き、cssをマージします.
まだ問題が解決されていないことがわかりました.
最後に、簡単なテストでPixture Reloadedの最新版で互換性の問題を基本的に解決できることが分かったので、既存のトピックを徹底的にアップグレードする必要があります.これは確かに手間がかかる.
3. 既存の環境
私たちが使用しているdrupalバージョンはdrupal 7.14です.
Pixture reloadedの具体的なバージョン:
pixture_reloaded 7.x-2.2,リリース時間2011-10-04
adaptivetheme 7.x-2.2、リリース時間2012-02-16
ダウンロード先:
http://ftp.drupal.org/files/projects/pixture_reloaded-7.x-2.2.tar.gz
http://ftp.drupal.org/files/projects/adaptivetheme-7.x-2.2.tar.gz
pixture_にアップグレードreloaded 7.x-3.x-dev、ダウンロードファイルアドレス:
http://ftp.drupal.org/files/projects/pixture_reloaded-7.x-3.x-dev.tar.gz
同様に、pixture_reloaded 7.x-3.x-devはadaptivetheme-7と一致する必要がある.x-3.x-dev、ダウンロードファイルアドレス:
http://ftp.drupal.org/files/projects/adaptivetheme-7.x-3.x-dev.tar.gz
4. アップグレードプロセス
Pixture Reloadedのテーマで多くの修正が行われているため、アップグレードには特に注意が必要です.Drupalのベストプラクティスに従って、アップグレードの中でいくつかの規範を再制定し、後続のアップグレードをより便利にしました.
4.1. 準備作業
データベースのバックアップとファイルのバックアップを事前に行います.
Webサイトをメンテナンスモードに設定、/admin/config/development/maintenance
新しいthemeをダウンロードして、2つのpixture_reloaded-7.x-3.x-devとadaptivetheme-7.x-3.x-dev
古いthemeファイルを削除します.新しいthemeファイルをアップロード
\sites\all\themes\pixture_reloaded
\sites\all\themes\adaptivetheme
修正/sites/default/settings.php、$update_を設定free_access = TRUE
うんてんhttp://www.xxx.com/update.phpを選択して、データベースを更新します.
4.2. pixture_の変更reloaded.cssファイル
\sites\all\themes\pixture_reloaded\css\pixture_reloaded.css
新しく追加したcssスタイルはpixture_に置くreloaded.cssファイルの最後にコメントを追加し、
たとえば、
brandingまたはlogoスタイルの変更:
}
#logo {
margin: 0;
padding: 0;
}
記事内容フォント色:黒
Footer背景色、Footerフォント色
記事タイトルを中央に表示
検索ボックスcssの変更
ハイパーリンクスタイル:
パブリッシュ情報のフォントと配置:
4.3. パフォーマンスでCSSファイルのマージと圧縮を有効にします.
IE 6またはIE 8のviewリストタイトルの背景色の奇数偶数表示の問題は、次のファイルを変更します
modules/system/system.theme.css
パフォーマンスキャッシュをオンにすると、windows xp+IE 8のトップページのカスタムブロックの上部に横線が表示されます.
modules/systemを変更します.theme.css
4.4. Extension(拡張):新版pixture reloaded 7.x-3.x-dev新機能
新しいトピック拡張Extensionsはデフォルトで選択されています.
テーマ設定、拡張設定:admin/appearance/settings/pixture_reloaded
Layout & General Settings 〉〉Enable extensions (global setting)
システムフォントやタイトルスタイルなどをカスタマイズした場合は、拡張でデフォルトで選択されているFonts、Title styles、Image alignment and captionsを一時的にキャンセルします.拡張機能をオンにすると、Rounded cornersとMenu settingsに対して設定できます.
フィレット(Corner radius:4 px)とメインナビゲーションメニューの位置合わせの設定:(中間位置合わせ).
注意:Windows 2003+IE 6、windows XP+IE 8フィレットは機能しません.
メインナビゲーションメニューの中央揃えWindows 2003+IE 6に左揃えが表示されます.
5. まとめ
ついに大功を成し遂げた.
詳細については、以下を参照してください.http://www.innovatedigital.com/node/803
http://www.innovatedigital.com/drupal
私たちがウェブサイトを開発する際にPixture Reloadedのテーマを選んだ理由は、主に海外で広く使用されているため、HTML 5をサポートし、iphone、アンドロイド携帯電話、各種ipad、普通のパソコンなど豊富なフロントエンドデバイスと互換性があるからです.
Pixture Reloaded ThemeはAdaptive Themeに基づいて再設計され、モバイルサポート、強力なレイアウトなど、その特徴を継承しています.
新しいバージョンのPixture Reloadedは、GoogleフォントとAdaptive Themeベースのモバイルデバイスのサポートを強化しました.
Pixture Reloaded 7.x-2.x基本特徴:
•18色スキーム
•カスタマイズされたカラーオプションのカスタマイズ
•Superfishモジュール内蔵
•Nogginモジュールは追加の機能をサポート
•構成可能なlayout–多くのオプション
•モバイルサポート(携帯電話、タブレット、iPad、iPhoneなど)
•フォント選択(Googleフォントを含む)
•フォントサイズの設定
•Headingスタイル
•フィレットの設定
•ボックスシャドウとバックグラウンドテクスチャのオプション
•画像位置設定
•Menu bulletsオプション
•Breadcrumb設定(開発版pixture_reloaded-7.x-3.x-devではこの機能はありません)
•検索結果表示設定
•オプションの水平ログインブロック設定
•18領域に3列と4列のパネルを含む
詳細については、以下を参照してください.http://www.innovatedigital.com/node/803
http://www.innovatedigital.com/drupal
2. Pixture Reloaded Themeをアップグレードする理由:
2012年初頭にウェブサイトを開発する際、Pixture Reloaded(7.x-2.x)を選択し、使用中にいくつかの深刻な問題が発見された.
IE 8はウェブサイトの各ページを開き、SysFader:iexploreが頻繁に現れる.exeアプリケーションエラーにより、IE 8ブラウザがクラッシュし、問題が深刻になりました.同時に国内で広く使われているIE 6のサポートが悪い、画像変形、ブロックずれ、速度が遅いなどの問題がある.
一部の原因はマイクロソフトのブラウザでよく知られている問題ですが、移行はまだ移行しなければなりませんが、Chrmoe、IE 9+、Firefoxなどのブラウザでよく表現されています.
次の方法で解決しようとしました.
A:「サードパーティブラウザ拡張の有効化」を外します.
IE 8を開き、「ツール->インターネットオプション->アドバンスド->ブラウズ->サードパーティブラウザ拡張機能の有効化*」を見つけ、選択を解除してからIE 8ブラウザを再起動します.
まだ問題が解決されていないことがわかりました.これも問題を解決する方法ではありません.私たちは使用者にこれらのことをさせることはできません.
B:Webサイトのパフォーマンスの最適化.
届かないthemeを無効または削除し、Webサイトのパフォーマンスキャッシュを開き、cssをマージします.
まだ問題が解決されていないことがわかりました.
最後に、簡単なテストでPixture Reloadedの最新版で互換性の問題を基本的に解決できることが分かったので、既存のトピックを徹底的にアップグレードする必要があります.これは確かに手間がかかる.
3. 既存の環境
私たちが使用しているdrupalバージョンはdrupal 7.14です.
Pixture reloadedの具体的なバージョン:
pixture_reloaded 7.x-2.2,リリース時間2011-10-04
adaptivetheme 7.x-2.2、リリース時間2012-02-16
ダウンロード先:
http://ftp.drupal.org/files/projects/pixture_reloaded-7.x-2.2.tar.gz
http://ftp.drupal.org/files/projects/adaptivetheme-7.x-2.2.tar.gz
pixture_にアップグレードreloaded 7.x-3.x-dev、ダウンロードファイルアドレス:
http://ftp.drupal.org/files/projects/pixture_reloaded-7.x-3.x-dev.tar.gz
同様に、pixture_reloaded 7.x-3.x-devはadaptivetheme-7と一致する必要がある.x-3.x-dev、ダウンロードファイルアドレス:
http://ftp.drupal.org/files/projects/adaptivetheme-7.x-3.x-dev.tar.gz
4. アップグレードプロセス
Pixture Reloadedのテーマで多くの修正が行われているため、アップグレードには特に注意が必要です.Drupalのベストプラクティスに従って、アップグレードの中でいくつかの規範を再制定し、後続のアップグレードをより便利にしました.
4.1. 準備作業
データベースのバックアップとファイルのバックアップを事前に行います.
Webサイトをメンテナンスモードに設定、/admin/config/development/maintenance
新しいthemeをダウンロードして、2つのpixture_reloaded-7.x-3.x-devとadaptivetheme-7.x-3.x-dev
古いthemeファイルを削除します.新しいthemeファイルをアップロード
\sites\all\themes\pixture_reloaded
\sites\all\themes\adaptivetheme
修正/sites/default/settings.php、$update_を設定free_access = TRUE
うんてんhttp://www.xxx.com/update.phpを選択して、データベースを更新します.
4.2. pixture_の変更reloaded.cssファイル
\sites\all\themes\pixture_reloaded\css\pixture_reloaded.css
新しく追加したcssスタイルはpixture_に置くreloaded.cssファイルの最後にコメントを追加し、
たとえば、
brandingまたはlogoスタイルの変更:
#branding {
width: 100%;}
#logo {
margin: 0;
padding: 0;
}
記事内容フォント色:黒
body {
color: black;
}Footer背景色、Footerフォント色
#footer{
background: #C3E7FC;
}
#footer-inner {
min-height: 42px;
}
#footer,#footer a{
color: #000000;
line-height: 1.6;
FONT-FAMILY:" ";
font-size:12px;
}
#footer a:hover{
color:#fe6a15;
text-decoration: underline;
}記事タイトルを中央に表示
h1#page-title{
text-align:center;
}検索ボックスcssの変更
#search-block-form input {
margin:0px auto;display: inline-block;
}
#search-block-form .form-submit {
margin:0px auto;display: inline-block;
}ハイパーリンクスタイル:
a:hover, a.active:hover, a:focus, a.active:focus {
text-decoration: underline;
color: #FE6A15;
}パブリッシュ情報のフォントと配置:
.submitted {
font-size: 0.9em;
text-align: center;4.3. パフォーマンスでCSSファイルのマージと圧縮を有効にします.
IE 6またはIE 8のviewリストタイトルの背景色の奇数偶数表示の問題は、次のファイルを変更します
modules/system/system.theme.css
tr.even{
background-color: #fff;
border-bottom: 0px solid #ccc;
padding: 0.1em 0.6em;
}
tr.odd {
background-color: #f5f5f5;
border-bottom: 0px solid #ccc;
padding: 0.1em 0.6em;パフォーマンスキャッシュをオンにすると、windows xp+IE 8のトップページのカスタムブロックの上部に横線が表示されます.
modules/systemを変更します.theme.css
tbody {
border-top: 0px solid #ccc;
}4.4. Extension(拡張):新版pixture reloaded 7.x-3.x-dev新機能
新しいトピック拡張Extensionsはデフォルトで選択されています.
テーマ設定、拡張設定:admin/appearance/settings/pixture_reloaded
Layout & General Settings 〉〉Enable extensions (global setting)
システムフォントやタイトルスタイルなどをカスタマイズした場合は、拡張でデフォルトで選択されているFonts、Title styles、Image alignment and captionsを一時的にキャンセルします.拡張機能をオンにすると、Rounded cornersとMenu settingsに対して設定できます.
フィレット(Corner radius:4 px)とメインナビゲーションメニューの位置合わせの設定:(中間位置合わせ).
注意:Windows 2003+IE 6、windows XP+IE 8フィレットは機能しません.
メインナビゲーションメニューの中央揃えWindows 2003+IE 6に左揃えが表示されます.
5. まとめ
ついに大功を成し遂げた.
詳細については、以下を参照してください.http://www.innovatedigital.com/node/803
http://www.innovatedigital.com/drupal