[方法] コンテンツ クエリ Web パーツ用に XSL をカスタマイズする

最終更新日: 2010年9月27日

適用対象: SharePoint Server 2010

コンテンツ クエリ Web パーツを使用して、Web サイトの複数のデータ ソースのコンテンツを集めた後、そのすべてを 1 か所に表示できます。コンテンツ クエリ Web パーツを構成してカスタマイズする前に、実現するブランドとサイトのデザインを考慮します。Microsoft SharePoint Server 2010 には、3 つの XSL (Extensible Style Language) ファイルがあり、これらのファイルを変更して、コンテンツ クエリ Web パーツが集めたコンテンツを表示するスタイルでフィールドをレンダリングできます。

このトピックでは、コンテンツ クエリ Web パーツで使用する 3 つの XSL ファイルと各ファイルの機能、変更可能なテンプレートと変数、指定した外観のデータをコンテンツ クエリ Web パーツでレンダリングするためにこれらのファイルを変更する方法について説明します。

次の表に、コンテンツ クエリ Web パーツを記述する 3 つの XSL ファイルの一覧と説明を示します。

既定では、ItemStyle.xsl ファイルと Header.xsl ファイルには次のテンプレートが含まれます。Header.xsl ファイルは、グループ スタイルの定義を含み、ItemStyle.xsl ファイルは、コンテンツ クエリ Web パーツの行アイテムに適用する定義を含みます。これらのスタイルは、スタイル ライブラリのスタイルを選択するときに表示される、[グループ] ドロップダウン リストと [アイテムのスタイル] ドロップダウン リストで使用できるオプションに対応します。

各テンプレートは、命令を処理する以下の 2 つのセクションを含みます。

• .データを処理して正しい書式設定を保証する <xsl:variable> セクション。

• HTML をレンダリングしてデータを含める <div> セクション。

ImageRight テンプレートのコメント付きのテンプレート コードを次に示します。

///Declares an XSL template named ImageRight that

///processes row style elements defined as ImageRight.

- <xsl:template name="ImageRight" match="Row[@Style='ImageRight']"
mode="itemstyle">

///The <xsl:variable> sections process and ensure correct formatting of the data.

///This section declares the variable named SafeLinkUrl, includes instructions to call the OuterTemplate.GetSafeLink function, and includes the LinkUrl expression to scope the call to the UrlColumnName parameter.
  - <xsl:variable name="SafeLinkUrl">
       /// The OuterTemplate.GetSafeLink variable passes in the UrlColumnName that represents the column name containing the ItemUrl.
    - <xsl:call-template name="OuterTemplate.GetSafeLink">
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'" />
      </xsl:call-template>
    </xsl:variable>

///This section declares the variable named SafeImageUrl and calls the OuterTemplate.GetSafeStaticUrl function.
  - <xsl:variable name="SafeImageUrl">
    - <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
        <xsl:with-param name="UrlColumnName" select="'ImageUrl'" /> 
      </xsl:call-template>
    </xsl:variable>

///This section declares the variable named SafeImageHtml and calls the OuterTemplate.GetColumnDataForUnescapedOutput function, and passes the 'PublishingRollupImage' and 'Image' parameter values to the template rule.
  - <xsl:variable name="SafeImageHtml">
    - <xsl:call-template name="OuterTemplate.GetColumnDataForUnescapedOutput">
        <xsl:with-param name="Name" select="'PublishingRollupImage'" /> 
        <xsl:with-param name="MustBeOfType" select="'Image'" /> 
      </xsl:call-template>
    </xsl:variable>

///This section declares the variable named DisplayTitle, includes calls to the OuterTemplate.GetTitle function, and passes the @Title and 'LinkUrl' parameter values to the template rule.
  - <xsl:variable name="DisplayTitle">
    - <xsl:call-template name="OuterTemplate.GetTitle">
        <xsl:with-param name="Title" select="@Title" /> 
        <xsl:with-param name="UrlColumnName" select="'LinkUrl'" /> 
      </xsl:call-template>
   </xsl:variable>

///This section declares the variable named LinkTarget and tests whether it should open the target URL in a new window. If the test returns True, then the template rule processes the instruction to open the target URL in a new window.
  - <xsl:variable name="LinkTarget">
      <xsl:if test="@OpenInNewWindow = 'True'">_blank</xsl:if> 
    </xsl:variable>

///The <div> sections define the data to render and provide instructions on how to render it. This code block defines item data, and uses the OuterTemplate.CallPresenceStatusIconTemplate function to verify whether it should create an icon.
- <div class="item">
    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate" />
///The <xsl:if test> instruction supplies a condition for the XSLT engine to evaluate. If the test evaluates to True after converting it to a Boolean value, the ItemStyle renders the content.
    - <xsl:if test="string-length($SafeImageUrl) = 0 and string-length($SafeImageHtml) != 0">
      - <div class="image-area-right">
          <xsl:value-of disable-output-escaping="yes" select="$SafeImageHtml" /> 
        </div>
      </xsl:if>
    - <xsl:if test="string-length($SafeImageUrl) != 0">
      - <div class="image-area-right">
        - <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
            <img class="image" align="left" border="0"   src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" /> 
          </a>
        </div>
      </xsl:if>
  - <div class="link-item">
    - <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
       <xsl:value-of select="$DisplayTitle" /> 
      </a>
      - <div class="description">
          <xsl:value-of select="@Description" /> 
        </div>
     </div>
  </div>
  </xsl:template>

SharePoint Server 2010 XSL ファイルの <xsl:variables> セクションでは、次の表に示すさまざまな関数を使用できます。

コンテンツ クエリ Web パートの追加とコンテンツ クエリ Web パーツの XSL を追加するには

1. サイトのホーム ページに移動し、[サイトの操作] をクリックし、[ページの編集] をクリックしてページをチェック アウトして編集モードにします。

2. いずれかの [Web パーツ領域] で、[Web パーツの追加] をクリックし、コンテンツ クエリ Web パーツを選択して追加します。

3. [編集] をクリックし、[共有 Web パーツの変更] をクリックします。

4. 必要に応じて、コンテンツ クエリ Web パーツのプロパティを変更し、フィールドを追加します。詳細については、「[方法] カスタム プロパティを使用してコンテンツ クエリ Web パーツをカスタマイズする」を参照してください。

   注意

   コンテンツ クエリ Web パーツを変更するとき、2 つのドロップダウン リストが [スタイル] セクションに表示されます。1 つはグループ スタイルであり、もう 1 つはアイテム スタイルです。これらのリスト アイテムは、ItemStyle.xsl ファイルと Header.xsl ファイルのテンプレートによって定義されます。

5. このトピックの情報を参考にして XSL を編集することで、select ステートメント、変数、および式の値を変更します。たとえば、<div> セクションの select ステートメントの値を変更して、式に別の変数を解決するように命令できます。

アイテムのスタイルを作成するには

1. 作成するスタイルに近いスタイルを識別します。

2. スタイルをコピーし、name プロパティと match プロパティの値を変更します。

   <xsl:template name="ImageRight" match="Row[@Style='ImageRight']" mode="itemstyle">
   <xsl:template name="ImageRight2" match="Row[@Style='ImageRight2']" mode="itemstyle">
   

関連項目

タスク

[方法] カスタム プロパティを使用してコンテンツ クエリ Web パーツをカスタマイズする

[方法] コンテンツ クエリ Web パーツ用に RSS をカスタマイズする

[方法] コンテンツ クエリ Web パーツにユーザー設定フィールドを表示する