Joomla Geliştirici Kılavuzu/Tema Yapma Temelleri ve Site Tasarımı

Bu sayfa başka bir dilden çevrilmektedir.

Çekingen davranmayın:

Çeviriye kalınan yerden devam edebilirsiniz.
Çeviriyi başlatan kişiyle iletişime geçip sayfanın durumunu sorabilirsiniz.
Sayfanın geçmişinden sayfa üzerinde çalışanları görebilirsiniz.

Overview

The Joomla Template system is amongst the easiest to learn in the Content Management System family.

Templates are located in the /templates directory. The following shows a typical directory structure for a template:

/templates
 /basic_template
  /css
   template_css.css
  /images
  index.php
  template_thumbnail.png
  templateDetails.xml

This is the minimum set of files you need to make a template. The filenames must be adhered to as each one is expected by the core script. Note that while there are no images shown in the /images directory, this is typically where you would place any supporting images for your template, like backgrounds, banners, etc. Let's have a look at each of these files.

index.php

This is the template layout file.

template_css.css

The css stylesheet for the template.

templateDetails.xml

This is a metadata file in XML format.

template_thumbnail.png

A reduced screenshot of the template, usually around 140 pixels wide and 90 pixels high.

The Layout File

While the template layout file is a PHP file, it is written mostly in HTML with only a few snippets of PHP. You do not have to be a master of PHP to write a template file. All you need to be able to do is learn where to place the key "hooks" into the Joomla templating engine.

Within the HTML framework you place "windows" that look into the database behind your web site. There are typically several small windows called Modules and usually one larger opening (like a frontdoor) for a Component. You are encouraged to write templates in XHTML. While there is debate over whether XHTML *is* the way of the future, it is a well formed XML standard, whereas HTML is a loose standard. Future versions of Joomla will rely more and more on XML so it is wise to adopt this model now.

The index.php file for a typical 3-column layout would look like the following in a skeletal form:

1: <?php

2: $iso = <a href="http://www.php.net/explode">explode</a>( '=', _ISO );

3: <a href="http://www.php.net/echo">echo</a> '<?xml version="1.0" encoding="' . $iso[1] . "\"?>\n";

4: /** ensure this file is being included by a parent file */

5: <a href="http://www.php.net/defined">defined</a>( '_VALID_MOS' ) or <a href="http://www.php.net/die">die</a>( 'Direct Access to this location is not allowed.' );

6: ?>

7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

8: <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>">

9: <head>

10: <title><?php <a href="http://www.php.net/echo">echo</a> $mosConfig_sitename; ?></title>

11: <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

12: <?php

13: if ($my->id) {

14: initEditor();

15: }

16: ?>

17: <?php mosShowHead(); ?>

18: <link href="<?php echo $mosConfig_live_site;?>/templates/basic_template/css/template_css.css" rel="stylesheet" type="text/css" />

19: </head>

20: <body>

21: <table cellspacing="0" cellpadding="5" border="0">

22: <tr>

23: <td colspan="3">

24: <?php <a href="http://www.php.net/echo">echo</a> $mosConfig_sitename; ?>

25: </td>

26: </tr>

27: <tr>

28: <td colspan="3">

29: <?php mosLoadModules ( 'top', 1 ); ?>

30: </td>

31: </tr>

32: <tr>

33: <td width="20%" valign="top">

34: <?php mosLoadModules ( 'left' ); ?>

35: </td>

36: <td width="60%" valign="top">

37: <?php mosMainBody(); ?>

38: </td>

39: <td width="20%" valign="top">

40: <?php mosLoadModules ( 'right' ); ?>

41: </td>

42: </tr>

43: <tr>

44: <td colspan="3" valign="top">

45: <?php mosLoadModules ( 'bottom' ); ?>

46: </td>

47: </tr>

48: </table>

49: </body>

50: </html>

Let's have a look at the main features. We are assuming you already know a bit about HTML pages so things like head tags, body tags, tables, etc will be skipped over.

Line 1-3: Defines the file as a valid XML file. _ISO is a special constant defining the character set encoding to use. It is defined in your language file.

Line 5: Prevents direct access to this file. It is essential that you include this line in your template.

Lines 7-8: Set up the XHTML standard for the page.

Line 10: Prints out the Site Name configuration variable with the opening and closing title tags.

Line 11: _ISO is used again to define the character set to use.

Line 12-16: $my->id is a script variable that is non-zero if a user is logged in to your site. If a user is logged in then the nominated WYSIWYG editor is pre-loaded. You may, if you wish, always pre-load the editor, but generally an anonymous visitor will not have the need to add content. This saves a little script overhead for normal browsing of your site.

Line 17: Inserts several metadata blocks.

Lines 18: Loads the CSS stylesheet. $mosConfig_live_site is a configuration variable that holds the absolute URL of your site.

Line 24: This prints the Site Name in a table cell (spanning the three columns).

Line 29: This loads any modules that are published in the "top" position. The second argument, "1", indicates that the modules are to be aligned horizontally.

Line 34: This loads any modules that are published in the "left" position. These modules will be displayed in a single column.

Line 37: This loads the component into your template. The component is set by the URL, for example, index.php?option=com_content will display the Content Component in this area.

Line 40: This loads any modules that are published in the "right" position. These modules will be displayed in a single column.

Line 45: This loads any modules that are published in the "bottom" position.

Style Sheets

CSS Stylesheets

TODO The XML Setup File

TODO

The Thumbnail

When you have finished your template, publish it with the Template Manager in the Adminstrator. Preview the site and take a screenshot. Import the screen shot into your favourite graphic editing package and crop it down to the contents of the browser's view port. Reduce the image down to around 140 pixels wide by 90 pixels high and save it in PNG format in your template directory (that is, /templates/basic_template).

Geri