Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
wordpress [2017/05/18 23:24]
Toni Corvera [Interlinks+]
wordpress [2017/05/19 01:27] (current)
Toni Corvera Finishing touches
Line 1: Line 1:
 ====== WordPress Plugins from OutlyerNet ====== ====== WordPress Plugins from OutlyerNet ======
- 
-<alert type="​warning"​ icon="​fa fa-warning">​Most of these plugins are unmaintained since I have little use for them.</​alert>​ 
  
 <callout type="​warning"​ title="​Caveat emptor"​ icon="​true">​ <callout type="​warning"​ title="​Caveat emptor"​ icon="​true">​
Line 9: Line 7:
 If you know that's the case, please contact me :). If you know that's the case, please contact me :).
  
-I can't say for sure either if I'm inadvertently breaking something or punching security holes into <abbr title="​WordPress">​WP</​abbr> ​although I can't see any such problems in the code I'm publishing.+I can't say for sure either if I'm inadvertently breaking something or punching security holes into WordPress although I can't see any such problems in the code I'm publishing.
 </​callout>​ </​callout>​
  
Line 18: Line 16:
 </​callout>​ </​callout>​
  
-===== Interlinks+ ​=====+===== Relative URLs ===== 
 + 
 +<callout type="​success"​ icon="​true">​This plugin works correctly with current versions of WordPress as of 2017.</​callout>​ 
 + 
 +[[/​files/​wordpress/​net_outlyer_wp-relativeurls.php|Download v1.5]] (last update october 14th 2007). 
 + 
 +Relative URL<​nowiki>​s</​nowiki>​ is mainly targeted at people with a **local copy** of their WordPress site and those that **reorganise and/or change their pages hierarchy often** although many standard installations can also take advantage of it. 
 + 
 +//Relative URLs// can be seen as kind of complementary to Interlinks: It creates a valid URL or link from a relative path. 
 +\\ 
 +If you want to link to a post Interlinks or Interlinks+ are better alternatives,​ but if you want to link to a given file in your site neither will help you. 
 +\\ 
 +I guess so far it isn't clear what's the need for such a plugin, so let's clarify a bit, note that: 
 + 
 +  * Pages can be accessed from more than one URL (I'm assuming your WordPress installation is in a subdirectory and URL redirection is being used): 
 +    * <​html><​samp>​http://​example.com/​parentpage/​page/</​samp></​html>​ 
 +    * <​html><​samp>​http://​example.com/​wordpress/​parentpage/​page/</​samp></​html>​ 
 +    * <​html><​samp>​http://​example.com/​wordpress/?​page_id=2</​samp></​html>​ 
 +  * Using an absolute URL to refer to stuff in the site has the potential of being broken if you 
 +    * Change WordPress'​ path, e.g.: <​html><​samp>​http://​example.com/​wordpress/</​samp></​html>​ is moved to <​html><​samp>​http://​example.com/</​samp></​html>​ or <​html><​samp>​http://​example.com/​blog/</​samp></​html>​. 
 +    * Change your (sub)domain,​ e.g. <​html><​samp>​http://​example.com/</​samp></​html>​ becomes <​html><​samp>​http://​blog.example.com/</​samp></​html>​. 
 +  * Using a relative URL to refer to stuff in the site has the potential of being broken if you (or visitors) 
 +    * Access from a different URL, e.g.: A relative URL like <​html><​samp>​images/​im.jpg</​samp></​html>​ will point to different things when accessed from <​html><​samp>​http://​example.com/​parentpage/​page</​samp></​html>​ (<​html><​samp><​var>​http://​example.com/​parentpage/​page/​images/​im.jpg</​var></​samp></​html>​) and <​html><​samp>​http://​example.com/​wordpress/?​page_id=2</​samp></​html>​ (<​html><​samp><​var>​http://​example.com/​wordpress/​images/​im.jpg</​var></​samp></​html>​).
  
-<alert type="​warning"​ icon="​fa fa-warning"​>This section isn't finished</alert>+Finally, if you use a local copy of WordPress to test stuff, chances are your local copy would have quite a different URL, e.g. <html><samp>​http:​//​localhost/​~username/​wordpress/</​samp></​html>​ and you might want your URLs to point to the local copy and not the on-line site.</​p>​  
 + 
 +===== Interlinks+ =====
  
-<callout type="success" icon="​true"​ title="​No longer needed">​This plugin was integrated back into the main [[//​wordpress.org/​extend/​plugins/​interlinks/​|Interlinks]] so it is deprecated.</​callout>​+<callout type="info" icon="​true"​ title="​No longer needed">​This plugin was integrated back into the main [[//​wordpress.org/​extend/​plugins/​interlinks/​|Interlinks]] so it is deprecated.</​callout>​
  
-<​p><​a href="files/​kd-o-interlinks.php">Download v1.0a+</​a> ​(last update october 13th 2007)</p>+[[/files/wordpress/​kd-o-interlinks.php|Download v1.0a+]] (last update october 13th 2007).
  
 Interlinks+ is based on [[http://​www.harleyquine.com/​php-scripts/​interlinks/​|Interlinks]] by Harley. The original adds a very nifty feature: it enables wiki-style interlinks (e.g. <​html><​code>​[[Some article]]</​code></​html>​ will be converted to a link to the post/page titled <​html><​var>&​quot;​Some article&​quot;</​var></​html>​). Interlinks+ is based on [[http://​www.harleyquine.com/​php-scripts/​interlinks/​|Interlinks]] by Harley. The original adds a very nifty feature: it enables wiki-style interlinks (e.g. <​html><​code>​[[Some article]]</​code></​html>​ will be converted to a link to the post/page titled <​html><​var>&​quot;​Some article&​quot;</​var></​html>​).
Line 49: Line 71:
 ^ Generated HTML | <code html><​font color='​red'>​Broken</​font></​code>​ | <code html><​span style="​color:​red;">​Broken</​span></​code> ​ | ^ Generated HTML | <code html><​font color='​red'>​Broken</​font></​code>​ | <code html><​span style="​color:​red;">​Broken</​span></​code> ​ |
 ^ Rendered HTML  | <​html><​span style="​color:​red;">​Broken</​span></​html>​ <label type="​warning">​broken link</​label>​ | <​html><​span style="​color:​red;">​Broken</​span></​html>​ <label type="​warning">​broken link</​label>​ | ^ Rendered HTML  | <​html><​span style="​color:​red;">​Broken</​span></​html>​ <label type="​warning">​broken link</​label>​ | <​html><​span style="​color:​red;">​Broken</​span></​html>​ <label type="​warning">​broken link</​label>​ |
- 
- 
-===== Relative URLs ===== 
- 
-<alert type="​warning"​ icon="​fa fa-warning">​This section isn't finished</​alert>​ 
- 
-<​p><​a href="​files/​net_outlyer_wp-relativeurls.php">​Download v1.5</​a>​ (last update october 14th 2007)</​p>​ 
- 
-Relative URL<​nowiki>​s</​nowiki>​ is mainly targeted at people with a **local copy** of their WordPress site and those that **reorganise and/or change their pages hierarchy often** although many standard installations can also take advantage of it. 
- 
-//Relative URLs// can be seen as kind of complementary to Interlinks: It creates a valid URL or link from a relative path. 
-\\ 
-If you want to link to a post Interlinks or Interlinks+ are better alternatives,​ but if you want to link to a given file in your site neither will help you. 
-\\ 
-I guess so far it isn't clear what's the need for such a plugin, so let's clarify a bit, note that: 
- 
-  * Pages can be accessed from more than one URL (I'm assuming your WordPress installation is in a subdirectory and URL redirection is being used): 
-    * <​html><​samp>​http://​example.com/​parentpage/​page/</​samp></​html>​ 
-    * <​html><​samp>​http://​example.com/​wordpress/​parentpage/​page/</​samp></​html>​ 
-    * <​html><​samp>​http://​example.com/​wordpress/?​page_id=2</​samp></​html>​ 
-  * Using an absolute URL to refer to stuff in the site has the potential of being broken if you 
-    * Change WordPress'​ path, e.g.: <​html><​samp>​http://​example.com/​wordpress/</​samp></​html>​ is moved to <​html><​samp>​http://​example.com/</​samp></​html>​ or <​html><​samp>​http://​example.com/​blog/</​samp></​html>​. 
-    * Change your (sub)domain,​ e.g. <​html><​samp>​http://​example.com/</​samp></​html>​ becomes <​html><​samp>​http://​blog.example.com/</​samp></​html>​. 
-  * Using a relative URL to refer to stuff in the site has the potential of being broken if you (or visitors) 
-    * Access from a different URL, e.g.: A relative URL like <​html><​samp>​images/​im.jpg</​samp></​html>​ will point to different things when accessed from <​html><​samp>​http://​example.com/​parentpage/​page</​samp></​html>​ (<​html><​samp><​var>​http://​example.com/​parentpage/​page/​images/​im.jpg</​var></​samp></​html>​) and <​html><​samp>​http://​example.com/​wordpress/?​page_id=2</​samp></​html>​ (<​html><​samp><​var>​http://​example.com/​wordpress/​images/​im.jpg</​var></​samp></​html>​). 
- 
-Finally, if you use a local copy of WordPress to test stuff, chances are your local copy would have quite a different URL, e.g. <​html><​samp>​http://​localhost/​~username/​wordpress/</​samp></​html>​ and you might want your URLs to point to the local copy and not the on-line site.</​p> ​ 
  
 ==== Usage ==== ==== Usage ====
Line 102: Line 97:
 ===== JS Base2 ===== ===== JS Base2 =====
  
-<alert type="warning" icon="fa fa-warning">​This ​section isn'​t ​finished</alert>+<callout ​type="danger" icon="true" title="​Abandoned">​This ​plugin is abandoned. Additionally,​ Base2 doesn'​t ​seem to be updated anymore.</callout>
  
-<​p><​a href="files/​js-base2-1.0+0.9a.tar.gz">Download v1.0+0.9a</​a> ​(last update october 24th 2007). (Note <​var>​1.0</​var>​ is the plugin version and <​var>​0.9a</​var>​ is the base2'​s ​version used in the plugin).</p>+[[/files/wordpress/​js-base2-1.0+0.9a.tar.gz|Download v1.0+0.9a]] (last update october 24th 2007). (Note <​var>​1.0</​var>​ is the plugin version and <​var>​0.9a</​var>​ is the Base2 version used in the plugin).
  
 A completely trivial plugin that loads [[http://​dean.edwards.name|Dean Edwards]] **base2** JavaScript library (see [[http://​dean.edwards.name/​weblog/​2007/​03/​yet-another|[1]]] and [[http://​code.google.com/​p/​base2/​| [2]]]). A completely trivial plugin that loads [[http://​dean.edwards.name|Dean Edwards]] **base2** JavaScript library (see [[http://​dean.edwards.name/​weblog/​2007/​03/​yet-another|[1]]] and [[http://​code.google.com/​p/​base2/​| [2]]]).
Line 114: Line 109:
 ===== JS Syntax Highlighter ===== ===== JS Syntax Highlighter =====
  
-<p><a href="files/​js-syntax-highlighter-0.2.tar.gz">Download v0.2</​a>​ (last update october 25th 2007).</p>+<callout type="danger"​ icon="​true"​ title="​Abandoned">This plugin is abandoned.</callout>
  
-<​p>​This plugin loads <a href="​http:​//code.google.com/​p/​syntaxhighlighter/">​Alex Gorbatchev'​s</​a>​ <​strong>​SyntaxHighlighter</​strong>​ JavaScript scriptWith a twist :)</p>+[[/files/wordpress/​js-syntax-highlighter-0.2.tar.gz|Download v0.2]] (last update october 25th 2007).
  
-<p>SyntaxHighlighter is a script that will highlight code from JavaScript when marked appropriately,​ hence allowing you to post raw code that will be automagically ​prettyprinted ​on load. +This plugin loads Alex Gorbatchev **[[http://​code.google.com/​p/​syntaxhighlighter/​SyntaxHighlighter]]** JavaScript script. With a twist :) 
-<br />+ 
 +//​SyntaxHighlighter// ​is a script that will highlight code from JavaScript when marked appropriately,​ hence allowing you to post raw code that will be automagically ​pretty-printed ​on load. 
 +\\
 I needed a couple workarounds to use it on my site and they were the motivation for this plugin: I needed a couple workarounds to use it on my site and they were the motivation for this plugin:
-</p> 
  
-<​dl>​ +First problem: Code must be enclosed in either a ''​<pre>'' ​or a ''​<​textarea>​'' ​tag, with their ''​name'' ​attribute set to certain (user-selectable) value.The problem is, ''​<pre>'' ​has no ''​name'' ​attribute so the page wouldn'​t validate. 
- <dt>First problem: Code must be enclosed in either a <code>&​lt;​pre&​gt;</​code> +\\ 
- or a <code>&​lt;​textarea&​gt;</​code> tag, with their <​code>​name</​code>​ +(emsp) ** My solution:** (Note I opted to not modify SyntaxHighlighter code) Mark code with a class and then, on-the-fly, add the name attribute from JavaScript (this makes the HTML validate as the invalid attribute is only created in-memory).
- attribute set to certain (user-selectable) value. +
- <br /> +
- The problem is, <code>&​lt;​pre&​gt;</​code> has no <​code>​name</​code> ​attribute so +
- the page wouldn'​t validate.</dt> +
- <dd style="​margin-bottom:​1em"><​strong>​My solution:</​strong> ​(Note I opted to not modify SyntaxHighlighter +
- code) Mark code with a class and then, on-the-fly, add the name attribute from +
- JavaScript (this makes the HTML validate as the invalid attribute is only +
- created in-memory).</dd>+
  
- <dt>Second problem: Each supported language has its own associated JavaScript +\\ 
- file which you should load when writing code for that language. I felt +Second problem: Each supported language has its own associated JavaScript file which you should load when writing code for that language. I felt loading them site-wide was was overkill (and I don't know which languages I might need), while loading them as needed, in the article bodyfelt cumbersome. 
- loading them site-wide was was overkill (and I don't know which languages I +\\ 
- might need), while loading them as needed, in the article body felt cumbersome.</dt> +(emsp) **My solution:** Load the common script, see if any languages are needed and load them dynamically. As a side effect the page will load faster (the required languages are loaded after the page ended loading).
- <​dd><​strong>​My solution:</​strong> ​Load the common script, see if any languages are +
- needed and load them dinamically. As a side effect the page will load faster +
- (the required languages are loaded after the page ended loading).</​dd>​ +
-</dl>+
  
-<p>So <​strong>​in short</​strong> ​this plugin loads SyntaxHighlighter allowing your +So **in short** this plugin loads SyntaxHighlighter allowing your pages to validate and only loading language files as needed.
-pages to validate and only loading language files as needed.</p>+
  
-<p>I also changed the CSS file a bit to use fonts I consider look better +I also changed the CSS file a bit to use fonts I consider look better and added colours to <​html>​<var></​html>​functions<​html>​</var></​html> and <​html>​<var></​html>​variables<​html>​</​var></​html>.
-and added colours to <​var>​functions</​var>​ and <​var>​variables</​var>​.</p>+
  
-<h3 id="​jsh-usage">​Usage</h3>+==== Usage ====
  
-<p>Plugin installation:​</p> +Plugin installation:​ 
-<​ol>​ +  ​- ​Decompress in the ''​wp-content/​plugins'' ​folder, it will create its own folder. 
- <li>Decompress in the <​code>​wp-content/​plugins</​code> ​folder, it will create +  ​- ​Activate it from WordPress'​ admin panel.
- its own folder.</li> +
- <li>Activate it from <abbr title="​WordPress">​WP</​abbr>​'admin panel.</​li>​ +
-</ol>+
  
-<p>Syntax highlighting:​</p> +Syntax highlighting:​ 
-<​ol>​ +  ​- ​Wrap your code in a ''<​pre>'' ​or ''<​textarea>'' ​with class ''syntax-highlight'' and the appropriate class for the language of the block, e.g. ''cpp'' for C++ (see [[http://​code.google.com/​p/​syntaxhighlighter/​wiki/​Languages|the full list]]). 
- <li>Wrap your code in a &lt;pre&​gt; ​or &lt;textarea&​gt; ​with class '<​code>​syntax-highlight</​code>​' and +  ​- ​There'​s no step 2 :P But remember the highlighting takes place a bit after loading the page.
- the appropriate class for the language of the block, e.g. '<​code>​cpp</​code>​' for C++ (see +
- <a href="http://​code.google.com/​p/​syntaxhighlighter/​wiki/​Languages">the full list</a>).</li> +
- <li>There'​s no step 2 :P But remember the highlighting takes place a bit after loading the page.</​li>​ +
-</ol>+
  
-<h4 id="​jsh-no-base2">​Usage without ​<em>base2</​em></​h4>​+=== Usage without base2 ===
  
-<p>I dropped support for such a situation. You can try with an older version of +I dropped support for such a situation. You can try with an older version of ''​loader.js'' ​but keep in mind that then languages ​**won't be autoloaded**.
-loader.js but keep in mind that then languages ​<​strong>​won't be +
-autoloaded</​strong>​.</p>+
  
-<h3 id="​jsh-caveats">​Caveats of the current version</h3>+==== Caveats of the current version ​====
  
-<h4 id="​jsh-passing-options">​Passing options for a single block</h4>+=== Passing options for a single block ===
  
-<p>Passing options for a block to SyntaxHighlighter needs a workaround as +Passing options for a block to SyntaxHighlighter needs a workaround as my loader won't detect the language then, the workaround is to use a hidden, empty block without options, i.e: 
-my loader won't detect the language then, the workaround is to use a hidden, +\\ 
-empty block without options, i.e:<br /> +If you want to have something like
-If you want to have something like</p>+
  
-<!-- Ensure correct loading of language ​file --> +<file javascript>​ 
-<div style="​display:​none !important;"><​pre class="​syntax-highlight html javascript"></​pre></​div> +<pre class="​syntax-highlight javascript:​firstline[10]"> 
- +function doSomething() { 
-<pre class="​html:​nogutter syntax-highlight">​ +}
- &​lt;​pre class=&​quot;​syntax-highlight javascript:​firstline[10]&​quot;&​gt;​ +
- function doSomething() { +
- } +
- &​lt;/​pre&​gt;​+
 </​pre>​ </​pre>​
 +</​file>​
 +<label type="​info">​PLEASE NOTE</​label>​ This is not an actual representation of the plugin in action. This page doesn'​t use SyntaxHighlighter.
  
-<p>Then you'll need to add a hidden block with the language class(es) needed. +\\ 
-That block can have the classes of all needed languages:</p>+Then you'll need to add a hidden block with the language class(es) needed. That block can have the classes of all needed languages:
  
-<pre class="​html:​nogutter:​firstline[5] syntax-highlight"​+<file javascript
- &lt;!-- Hidden, meaningless,​ code block --&gt; +<!-- Hidden, meaningless,​ code block --> 
- &lt;div style=&quot;display:​none !important;&​quot;&​gt;​ +<div style="display:​none !important;"> 
- &lt;pre class=&quot;syntax-highlight html cpp&​quot;&​gt;&​lt;​/pre&gt; + <pre class="syntax-highlight html cpp"><​/pre> 
- &lt;/div&gt; +</div> 
-</pre>+</file>
  
-<h4 id="​jsh-disabled-aliases">​Disabled language aliases</h4>+=== Disabled language aliases ​===
  
-<p>Due to the way the code is written the following language name aliases won't +Due to the way the code is written the following language name aliases won't be looked for (all of them have alternatives): ​''​c++''​''​c#''​''​vb.net''​.
-be looked for (all of them have alternatives): ​<​code>​c++</​code>​<​code>​c#</​code>​, +
-<​code>​vb.net</​code>​.</p>+
  
-<p>They could be enabled with some escaping but I didn't feel the need :p</p>+They could be enabled with some escaping but I didn't feel the need :p
  
-<h3 id="​jsh-config">​Customisation</​h3>​ +==== Customisation ​====
- +
-<​p>​There'​re a couple things you might want to tweak, to change them edit the file <​code>​loader.js</​code>​ +
-(note that the version actually loaded in the browser is the one in the <​code>​js/</​code>​ directory,​ +
-but it is shipped packed with <a href="​http://​dean.edwards.name/​packer/">​Dean Edwards'​ packer</​a>,​ +
-which makes it quite harder to edit. I suggest you to edit the version in the <​code>​full-js/</​code>​ +
-directory and once you're happy with it pack it again.</​p>​ +
- +
-<script type="​text/​javascript"​ src="​http://​outlyer.net/​site/​wp-content/​plugins/​js-base2/​base2-dom-fp.js"></​script>​ +
-<script type="​text/​javascript"​ src="​http://​outlyer.net/​site/​wp-content/​plugins/​js-syntax-highlighter/​js/​shCore.js"></​script>​ +
-<script type="​text/​javascript"​ src="​http://​outlyer.net/​site/​wp-content/​plugins/​js-syntax-highlighter/​js/​loader.js"></​script>​ +
-<script type="​text/​javascript">​ +
-dpLoader.init('​http://​outlyer.net/​site/​wp-content/​plugins/​js-syntax-highlighter'​);​ +
-</​script>​ +
- +
-<pre class="​syntax-highlight javascript:​firstline[19]">​ +
-    bloggerMode:​ false, ​ // Set to true if the blogging software adds &lt;br /&​gt;'​s +
-                         // See: &​lt;​http://​code.google.com/​p/​syntaxhighlighter/​wiki/​BloggerMode&​gt;​ +
-    opts: [              // Options for HighlightAll,​ see &​lt;​http://​code.google.com/​p/​syntaxhighlighter/​wiki/​HighlightAll&​gt;​ +
-            true,        // Show Gutter +
-            false, ​      // Show Controls (!*not default*) +
-            false, ​      // Collapse all +
-            1,           // First line +
-            false        // Show columns +
-        ], +
-    WAIT_TO_LOAD:​ 200,    // (ms) Period to wait between checks for language loading +
-    FAIL_TIMEOUT:​ 120000, // (ms) After this period will stop trying to load languages +
-</​pre>​+
  
-<​p>​These are the meaningful variables, I think they'​re ​self explanatory enough, +There're a couple things ​you might want to tweak, to change them edit the file ''​loader.js''​ (note that the version actually loaded in the browser is the 
-note of warning though: if some of the languages fails loading ​you'll have to +one in the ''​js/''​ directory, but it is shipped packed with [[http://​dean.edwards.name/​packer/​|Dean Edwards'​ packer]]which makes it quite harder to edit. 
-wait for <​code>​FAIL_TIMEOUT<​/code> milliseconds before syntax highlighting gets +I suggest you to edit the version in the ''​full-js/''​ directory ​and once you're happy with it pack it again.
-enabled. Set it too low, though, and you'll get bogus failures.</p>+
  
-<!-- End of JS Syntax Highlighter -->+<file javascript>​ 
 +bloggerMode:​ false, ​ // Set to true if the blogging software adds <br />'​s 
 +                     // See: <​http://​code.google.com/​p/​syntaxhighlighter/​wiki/​BloggerMode>​ 
 +opts: [              // Options for HighlightAll,​ see <​http://​code.google.com/​p/​syntaxhighlighter/​wiki/​HighlightAll>​ 
 +        true,        // Show Gutter 
 +        false, ​      // Show Controls (!*not default*) 
 +        false, ​      // Collapse all 
 +        1,           // First line 
 +        false        // Show columns 
 +    ], 
 +WAIT_TO_LOAD:​ 200,    // (ms) Period to wait between checks for language loading 
 +FAIL_TIMEOUT:​ 120000, // (ms) After this period will stop trying to load languages 
 +</file>
  
-<hr style="​margin-top:​1em;"​ /> +These are the meaningful variables, I think they'​re self explanatory enough, ​note of warning thoughif some of the languages fail loading you'll have to 
-<​footer>​ +wait for ''​FAIL_TIMEOUT''​ milliseconds before syntax highlighting gets enabledSet it too low, though, and you'll get bogus failures.
-<div class="​footer">​ +
- <​address>&​copy;​ 2007 <span id="​email">​Toni Corvera &​lt;​outlyer at gmail dot com&​gt;</​span>​ +
- <br /> +
- <span class="​tiny">​[<​href="​http://​outlyer.net./​pubkey.asc">​GPG Key</​a>​]</​span></​address>​ +
- <br /> +
- <​aside><​address>​ +
- Other than by e-mail, you can leave your comments about any of these plugins in the +
- <a href="​http://​outlyer.net/​codigo/​wordpress/"​ hreflang="​es">​WordPress code</​a>​ page in my site. +
- </​address></​aside>​+
  
 +<WRAP rightalign small>
 +//(c) 2007 Toni Corvera < outlyer at gmail dot com >//
 +</​WRAP>​
  
  
All dates/times in this page are UTC.